Detect support for background-attachment: fixed?

问题

Is there a way to detect browser support for background-attachment: fixed?

Edit: Although this feature is widely supported on desktop browsers it is poorly supported on portable devices which I why I would like to be able to detect the feature.

回答1:

When you use { background-attachment:fixed } current mobile devices will not display the background image at all! To ensure the image is displayed on all mobile devices, you need to test for support, and if not supported to set the background-attachment property to either 'initial' (i.e. default state) or 'scroll' (which is the default state).

The bad news:

It's currently impossible to directly and specifically test for support of fixed backgrounds because mobile browsers will incorrectly report that they do support it. To see this bug for yourself, load this test in a mobile browser:

http://codepen.io/mattthew/pen/PwEqJa

function supportsCSS(value) {
    try {
        var style = document.body.style;
        if (!("backgroundAttachment" in style)) return false;
        var oldValue = style.backgroundAttachment;
        style.backgroundAttachment = "fixed";
        var isSupported = (style.backgroundAttachment === value);
        style.backgroundAttachment = oldValue;
        return isSupported;
    }
    catch (e) {
        return false;
    }
}

var el = document.getElementById('result');
var txt = '<b>This device &amp; broswer supports:</b><br>';
txt += '{ background-attachment:fixed; } : ' + supportsCSS('fixed') + '<br>';
txt +=  { background-attachment:foo; } : ' + supportsCSS('foo');

el.innerHTML = txt;

based on code originally written by: @chao

The limited options:

It is possible to indirectly test for support with multiple methods.

Option 1: Remove fixed background on small screens

This option uses a CSS media query to target smaller screens to overwrite the style on devices with screen widths of 1024px or smaller (devices likely to render fixed backgrounds as invisible). The advantages of this option are: it's very lightweight and only requires a little bit of CSS:

#some_element {
     background-attachment: fixed;
}

@media all and (max-device-width: 1024px) {
     /* 
     overwrite property for devices with 
     screen width of 1024px or smaller  
     */
     #some_element {
          background-attachment: scroll;
     }
}

Unfortunately, there are a small number of tablet brands with screen widths of 1280px and 1366px, which overlap with the smallest desktop screens (sort this list by CSS Height). The safest play is to use a scrolling background for this overlap area so that the background image is guaranteed to display. If you want to play it safe, use max-device-width: 1366px. However, the number of people using these giant tablets is much smaller than the number of people with small screen laptops.

Option 2: test for touch events and mouse events

This option uses JS to test if the browser supports the touch events API, and is therefore more likely than not to be on a touch screen device (a device more likely than not to render fixed backgrounds as invisible). This is the heavy weight option. It requires Modernizr and jQuery:

if(Modernizr.touch) {
  // this browser claims to support touch, so remove fixed background
  $('#some_element').css('background-attachment','scroll');
}

Unfortunately, this option also has a gray area. Some browsers give a false positive and some give a false negative. You could test for a mouse event, such as:

$('body').mousemove(function(event){
  // this device (touch or not) has a mouse, so revert to fixed background
  $('#some_element').css('background-attachment','fixed');
  $('body').unbind('mousemove');
});

However, it's possible that a mouse has been attached to a touch-screen laptop that doesn't support fixed backgrounds, so that code adds risk.

回答2:

You might look at document.body.style and make sure that

there's a property there called "backgroundAttachment", and
you can set it to "fixed", and it retains its value when you do so.

Chrome, FF, Opera, and Safari all ignore attempts to set the property to an invalid value. IE9 throws an exception when you try. So if either one happens, that value definitely isn't supported. (If the browser just blindly sets the value and retains it, then it still might not work. But at that point, you really can't the browser to tell you much anyway.)

function supportsFixedBackground() {
    try {
        var style = document.body.style;
        if (!("backgroundAttachment" in style)) return false;
        var oldValue = style.backgroundAttachment;
        style.backgroundAttachment = "fixed";
        var isSupported = (style.backgroundAttachment === "fixed");
        style.backgroundAttachment = oldValue;
        return isSupported;
    }
    catch (e) {
        return false;
    }
}

I don't bother with IE6 anymore, and don't have another browser handy that doesn't support fixed backgrounds, so i'm unable to test setting "fixed".

回答3:

I think I've got the solution for all devices. It's possible to detect clip-support, so I did just that and made a change in the DOM for when clip is supported. If it isn't, it falls back on background-attachment: fixed;

See the code at https://codepen.io/AartdenBraber/pen/gGmdWK

回答4:

Support for any CSS property value can be detected via following steps:

create a temporary element (e.g. DIV);
set value of its style DOM property (element.style.backgroundAttachment in your case) to value to check (fixed in your case);
compare actual style value with specified string.

Something like this in your case:

var elem = document.createElement('div');
elem.style.backgroundAttachment = 'fixed';
var isSupported = 'fixed' === elem.style.backgroundAttachment;

回答5:

http://www.w3schools.com/cssref/pr_background-attachment.asp

There are pictures of the major browser icons a little bit down the page. The images aren't greyed out for any of the icons. It says that it is supported in all browsers