Detect support for background-attachment: fixed?

Question

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.

Answer 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.

Answer 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".