NO BUG: Background "fixed" broken on iOS?

Bricks Version: 1.4
Browser: Safari, Chrome, possibly Brave & Firefox


I ran into this odd problem where my images “don’t load” when testing my site on my iPhone.
The “Fixed” setting for background images of a container seems to break them when using Safari & Chrome. The scroll effect is not happening, and the images does not load properly. It just looks zoomed in to a point where it’s just a gradient of colors.

If I then set the background to “scroll” it works perfectly fine.

On my page provided above, I’ve set the first images (Photography text) to fixed and the second one (Web text) set to scroll.

This does only occur on my phone. It looks perfectly fine in preview when editing on my computer.
Also works perfectly fine on my girlfriend Android.

Let me know if anything was unclear :stuck_out_tongue:

This is an issue with background-attachment: fixed rule itself as far as I know.

I generally set it to scroll on smaller breakpoints.

1 Like

I’ve been informed in the Facebook gruop that this is a known issue on iOS devices, as they do not support fixed backgrounds. :frowning:

Hey Totte, the one over at Facebook was me :smiley:
Sridhar is right. It’s a known issue with iOS for years:unamused:

Best regards,


On the bright side… there’s no bug YOU guys have to fix :stuck_out_tongue: Keep up the good work <3

But is there a workaround? Would really appreciate if someone could tell me how they handle this.

A workaround is to add a fixed element instead, with a regular background. As the issue is only with fixed backgrounds, but it handles fixed elements fine.

eg The Fixed Background Attachment Hack | CSS-Tricks - CSS-Tricks

1 Like