Parallax Images Don't Display Properly on iPad

Problem/Motivation

Try to place a parallax picture. With testing on different devices I figured out, that the picture is not correctly presented on the IPAD. My investigation confirmed my observations:
experiencing inconsistent rendering of parallax images on my Drupal 11 site across different devices. While they look fine on Windows and Android (using Firefox), they appear broken or distorted on iPad — both in Safari and Firefox. This issue is common and stems from limitations in iOS and WebKit-based browsers. - Info from Copilot.


Here are the main reasons:

background-attachment: fixed is unreliable on iOS iOS browsers (Safari and Firefox, which both use WebKit) do not fully support background-attachment: fixed. This CSS property is often used for parallax effects but behaves inconsistently on iPads and iPhones.



High-resolution Retina displays iPads use Retina screens with high pixel density. If images aren't scaled properly (e.g., using background-size: cover), they may appear zoomed in or misaligned.



Touch-based scrolling optimizations iOS optimizes scrolling for touch input, which can interfere with parallax effects. These optimizations may override or ignore certain CSS behaviors.

Steps to reproduce

Proposed resolution

1. Avoid background-attachment: fixed

Instead, use position: fixed or CSS transforms for a more reliable parallax effect:



css

.parallax-section {

position: relative;

overflow: hidden;

}



.parallax-section::before {

content: "";

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-image: url('your-image.jpg');

background-size: cover;

background-position: center;

z-index: -1;

will-change: transform;

}


2. Use a proper viewport meta tag

This helps control scaling on mobile devices:



html




3. Target iOS with CSS feature detection

You can apply alternate styles specifically for iOS:



css

@supports (-webkit-touch-callout: none) {

.parallax-section {

background-attachment: scroll !important;

}

}




Dear Alaa, would it be possible to implement appropriate changes in order to make Parallax Images Displaying Properly on iPad and other iOS devices.

Many thanks for your work!

Remaining tasks

User interface changes

API changes

Data model changes