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

@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%;
 }
}