detect if background-attachment fixed is supported

Question

I could not find an up to date answer on this, so wanted to double check.

Ideally I would like to use background-attachment: fixed to obtain a parallax effect, however I have found that this does not work on mobile phone's and tablets.

I decided to disable it by default, but use javascript to enable it if it is not a small screen size or devices with navigator.userAgent that contain things such as iPhone, iPad etc:

navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone|iPad|iPod/i) ||
                  navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i) || navigator.userAgent.match(/Opera Mini/i) ||
                  navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/Mobile/i) || navigator.userAgent.match(/Tablet/i);

I have found that when I switch between the responsive design modes in safari, the userAgent does not update properly and often contains iPhone or iPad, when I am on a different screen.

Is there a standard/reliable way to detect if a screen supports background-attachment: fixed ?

Alternatively is there a way to get the parallax effect working on all browsers ?

Thanks

Mark

check : https://developer.mozilla.org/en-US/docs/Web/CSS/@supports — Temani Afif, Aug 20 '20 at 08:46
Here's solution: https://stackoverflow.com/questions/14115080/detect-support-for-background-attachment-fixed — Dmitri, Aug 20 '20 at 08:49
These two comments highlight the problem that I am encountering. The first one suggests using @supports, but the second article indicates that some browsers incorrectly report that they support background-attachment fixed. The second article has a large number of different solutions with various limitations/problems. Thanks for the replies though. — MarkyMark1000, Aug 20 '20 at 08:57
Also, this article indicates that @supports returns the incorrect result on many occasion: https://www.quirksmode.org/blog/archives/2016/07/the_limits_of_s.html — MarkyMark1000, Aug 20 '20 at 09:23

score 0 · Answer 1 · answered Sep 02 '20 at 04:37

Expounding on the issues mentioned in the comments:

@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.)

Checking for iPhone iPad iPod & Android in the user agent detects browsers with this rendering pattern, but may include other browsers installed that render fixed backgrounds correctly, which may include mobile Firefox which is constantly evolving.

Targeting mobile webkit only, below I detail the best CSS-only solution that would work on mobile Safari, mobile Chrome, yet not desktop Safari Responsive Design Mode which does not reflect an accurate mobile render.

Webkit Solution for Safari & Chrome:

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

Capitalizing on that similarity, 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%;
 }
}

detect if background-attachment fixed is supported

1 Answers1