Identify compatibility with the background-attachment property set to fixed

I've been searching for an updated answer on this topic, but I couldn't find one so I wanted to confirm.

My goal is to achieve a parallax effect using background-attachment: fixed, however I've noticed that it doesn't work on mobile phones and tablets.

As a solution, I decided to disable it by default and use JavaScript to enable it only for larger screen sizes or devices with user agents like 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);

However, when testing in the responsive design modes in Safari, I've encountered issues where the user agent doesn't update properly and still shows iPhone or iPad even on different screens.

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

Alternatively, is there a method to make the parallax effect work on all browsers?

Thanks,

Mark

javascripthtmlcss

Answer №1

Discussing the issues raised in the comments:

@supports (background-attachment: fixed)
will return true as the browser engine correctly interpreted the property and value. Subsequently, mobile webkit chooses to associate your background with the same stacking context as the element it is applied to for optimized performance. (Each z-index has its own stacking layer, and on desktop browsers, fixed backgrounds have a separate layer.)

Detecting iPhone iPad iPod & Android in the user agent identifies browsers following this rendering behavior, but there could be other installed browsers that render fixed backgrounds accurately, including evolving options like mobile Firefox.

Focusing solely on mobile webkit, below I outline an effective CSS-only solution that caters to mobile Safari and Chrome without affecting the view on desktop Safari's Responsive Design Mode, which does not mirror a genuine mobile display.

Solution for Safari & Chrome:

@supports (-webkit-overflow-scrolling: touch)
targets all versions of mobile webkit where backgrounds are not attached to the viewport.

Building upon this similarity, the background can be initially fixed, followed by applying this @supports rule to provide a mobile-friendly alternative.

Example:

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

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

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

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

  /* Using the same background with size=cover may work in certain cases */
  background-image: url('bg.png'); background-size: cover;

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Are you familiar with the Puppeteer PDF tool that generates empty pages from the cloud and seamlessly integrates with Postman? What do

After days of searching, tweaking, and deploying, I still can't get this to work. I'm hoping it's just a simple mistake on my part that someone else can help me with. I am attempting to use Puppeteer to generate a PDF from a Node.js Express ...

javascriptnode.jsexpresspdfpuppeteer

Connecting Mailchimp with WordPress without using a plugin can lead to a Bad Request 400 error when trying to

I'm attempting to connect with Mailchimp using an Ajax request without relying on a plugin, but I keep encountering a 400 bad request error. The code provided below utilizes vanilla JS for Ajax and the function required for integration with Mailchimp. ...

javascriptphpajaxwordpressmailchimp

A comprehensive guide on creating translation files using grunt angular-translate from original JSON files containing translations

I have a unique angular application that requires support for multiple languages. To achieve this, I have implemented the angular translate task in the following manner. My goal is to create separate language files which can be loaded later using the useSt ...

javascriptangularjsjsongruntjsangular-translate

Prevent unauthorized access to HTML pages with a secure login system

I created a basic login system using JavaScript that requires users to enter the correct username and password. Once verified, they are redirected to log1.html. From there, they can access various subpages such as log1-sub.html. However, I am struggling to ...

html

Hiding a HubSpot form is made easy with the utilization of vue.js and its

Struggling with using vue's v-show to toggle between two hubspot forms based on website locale/language (using vue i18n). The navbar controls language switching. Currently, both forms always show or both are hidden. Even after trying vuex, the issue ...

javascriptvue.jsvuexhubspot

GWT Designer style issue plaguing development efforts

Currently, I am working on designing a login view using GWT Designer while incorporating styles from Twitter Bootstrap. The structure I have set up is as follows: However, the displayed result does not meet my expectations: Despite setting all CSS paddi ...

cssgwtstylesgwt-designer

Utilizing Vue.js: Dynamically Rendering Components Based on Routes

I needed to hide some components for specific Routes, and I was able to achieve this by using a watcher for route changes that I found in this StackOverflow question - Vuejs: Event on route change. My goal was to not display the header and sidebar on the c ...

javascriptvue.js

Switch up the checkbox status using a hyperlink within the checkbox manipulation strategy

My coworker and I collaborated on a website that features a FAQ page. Each question is followed by an "Answer" spoiler button. By clicking the button, the answer is revealed below the current question and above the next one. Clicking the button again hides ...

htmlcssbuttonhyperlinkshow-hide

Exploring the directories: bundles, lib, lib-esm, and iife

As some libraries/frameworks prepare the application for publishing, they create a specific folder structure within the 'dist' directory including folders such as 'bundles', 'lib', 'lib-esm', and 'iife'. T ...

javascriptnode.jstypescriptwebpackrollup

Adding alpha or opacity to the background image will give it a unique and

Is there a way to darken the background image while keeping the text color the same? Check out this code snippet on JSFiddle div { display:block; background:url('http://placehold.it/500x500') 0 0 no-repeat; background-color:rgba(0 ...

htmlcss

Angular 5 in conjunction with Keycloak enabling access for non-authenticated users

I have a situation where I need to implement anonymous user access in my app, and for that purpose, I am incorporating the 'keycloak-angular' library along with Angular 5. The documentation instructs me to initialize the application as shown belo ...

javascriptangularkeycloak

Implement dynamic routes within your Nuxt single page application once it has been generated

I'm currently exploring the possibility of implementing dynamic routes in a Nuxt SPA. While I am familiar with using dynamic routes in Universal Mode and generating them during build time through functions, I am searching for a solution that does not ...

javascriptvue.jsnuxt.js

At times, the map may only be visible in the top left corner of its designated container

Currently, I am integrating the Google Maps API v3 for JavaScript into my project. However, I am facing an issue where the map only appears in the upper left corner under certain circumstances. To visualize this problem, you can visit this link and click ...

javascriptgoogle-maps-api-3

JavaScript Class vs Function as Definition

Having trouble locating documentation for this issue. I devised a JavaScript class in the following manner: class Polygon { constructor(height, width) { this.height = height; this.width = width; } area = function() { return this.height ...

javascriptjsfiddle

Unique Input Values in Forms

I'm encountering an issue with a basic HTML form connected to a PHP script for processing values. Despite thorough testing, the form is not functioning correctly. Upon inspecting the form markup, I discovered: <form id="delete_item_3_form" action ...

javascriptphpjqueryformspost

Having trouble aligning page in the center with flexbox and styled components

Hey there, I'm having some trouble figuring out how to center my page using flexbox within styled components in a Next.js app. Any suggestions or tips? Let me share with you my Blog Component import ReactMarkdown from 'react-markdown' impor ...

htmlcssreactjsnext.jsstyled-components

JavaScript Image Swap

I tried implementing this script but it didn't work for me. I'm not sure what to do next, so I'm reaching out for help. The script is at the top of the page, followed by a picture with an id that I'd like to change when a button below i ...

javascripthtmlcss

Click anywhere outside the sidemenu to close it

I want the menu to behave like the side menu on Medium. When the side menu is open and the user clicks outside of #sidebar-wrapper, the side menu should close. Currently, I have to click the toggle X to close the menu. html <a id="menu-toggle" href="# ...

javascriptjqueryhtmlcssmenu

Troubleshooting React/Jest issues with updating values in Select elements on onChange event

I am currently testing the Select element's value after it has been changed with the following code: it("changes value after selecting another field", () => { doSetupWork(); let field = screen.getByLabelText("MySelectField") ...

javascriptreactjstypescriptjestjs

NodeJS/express: server became unresponsive after running for some time

Initially, my service using express and webpack ran smoothly. However, I started encountering an issue where the server would hang with no message code being received, as shown in the server message screenshot (server message screenshot). This problem kept ...

javascriptnode.jsreactjsexpresswebpack