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

Answer 1

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

Answer 2

fixed is supported in all desktop browsers, except IE6 and older.

It is supported by most mobile browsers, but you may see some discrepencies due to viewport handling.

Source

Answer 3

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 4

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

1. create a temporary element (e.g. DIV);
2. set value of its style DOM property (element.style.backgroundAttachment in your case) to value to check (fixed in your case);
3. 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;

Answer 5

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

Answer 6

@supports (background-attachment: fixed) will report true because the browser engine interpreted the property and value successfully. Then, mobile webkit decides to bind your background to the same stacking context (same rendering plane) as the element it is applied to for "better performance". (All z-indexes have their own stacking layer, and on desktop browsers, fixed backgrounds get their own layer.)

One could use JS to detect browsers with this rendering pattern, by checking for iPhone iPad iPod & Android in the user agent, which may target mobile browsers that render fixed backgrounds correctly, such as mobile Firefox which is constantly evolving. However, I found a better way in pure CSS:

CSS Only Solution for Mobile Safari & Chrome:

@supports (-webkit-overflow-scrolling: touch) targets all the same versions of mobile webkit that refuse to bind backgrounds to the viewport.

So with that in mind, you can fix your background by default, then append this @supports rule to apply a sort of mobile polyfill:

Example:

body {
 background-image: url('bg.png');
 background-size: cover; background-attachment: fixed;
}

@supports (-webkit-overflow-scrolling: touch) {

 /* Detach problematic background */
 body { background: none !important; }

 /* Insert empty div at bottom of page */
 #lonelyDiv {
  position: fixed; top: 0px; left: 0px; z-index: -1;
  width: 100%; height: 100%;

  /* Using same background with size=cover may be possible in some situations */
  background-image: url('bg.png'); background-size: cover;

  /* Other designs may require a stretchable background...
   or cropped versions for mobile aspect ratios applied after @media (orientation) rules */
  background-image: url('mobile-bg.png'); background-size: 100%;
 }
}