Image Banner Glitch Covers Page On Certain Devices - Dawn Theme

Store Design
,

Topic summary

A user encountered a glitch with an image banner using a fixed background position (parallax effect) on their Dawn theme homepage. When scrolling to this section on older iPads, the image malfunctions and covers the entire page, blocking other content. The issue appears device-specific, affecting certain older iOS devices while working correctly on others.

Root Cause:
iOS devices have known compatibility issues with parallax effects.

Solution Provided:
A community member suggested disabling the parallax effect specifically for older iOS devices by adding custom CSS code to the base.css file in the theme’s Asset folder. The code uses a media query to target devices with specific screen dimensions and pixel ratios.

Resolution:
The original poster tested the CSS fix and confirmed it works perfectly, resolving the glitch.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I’ve added an image banner halfway down my homepage with the ‘Fixed Background Position’ image behaviour applied to it.

The issue I’m facing occurs when scrolling down to this section, the image within the banner glitches out and then covers the entire page, blocking other parts of the website.

The issue only seems to happen on certain devices (older ipads are what I’ve tested) but seems to work as intended on others.

I’ve added two screenshots below, one of how it is meant to look and one with the glitch.

If anyone would be able to assist me in fixing this, it would be a great deal of help.

Website Link: www.solaque.co.uk

Thanks,

Aaron

Screen Shot 2024-10-25 at 4.11.07 pm.png
Screen Shot 2024-10-25 at 4.11.07 pm.png679×905 451 KB

Screen Shot 2024-10-25 at 4.19.55 pm.png
Screen Shot 2024-10-25 at 4.19.55 pm.png754×915 473 KB

2

Hi @Aaron-Mihell

I believe this glitch is due to the parallax effect that you have on that section. The IOS wasn’t friendly with Parallax. Unfortunately, your way around this is to disable the parallax effect to older IOS devices. Please try the following

  1. From the Admin page, go to Online Store > Themes
  2. Select the theme you want to edit, click the three dots to edit code
  3. Under the Asset folder, open the base.css
  4. Then place the code below at the very bottom of the file and SAVE
@media only screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 1) {
#Banner-template--23721731359051__image_banner_t9Ygk .animate--fixed>img:not(.zoom):not(.deferred-media__poster-button), 
#Banner-template--23721731359051__image_banner_t9Ygk .animate--fixed>svg:not(.zoom):not(.deferred-media__poster-button){
    position: relative;
    object-fit: cover;
    height: 100%;
}
}
3

Hi @Made4uo-Ribe ,

Thank you for this. I just tested it and it works perfectly.

Thanks,
Aaron