NO BUG: Background "fixed" broken on iOS?

Bugs
1

Bricks Version: 1.4
Browser: Safari, Chrome, possibly Brave & Firefox
OS: iOS
URL: https://tottelundgren.com

Hi!

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:

2

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
3

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:

4

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,
timmse

3 Likes
5

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

6

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

7

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
8

I searched on every forum on internet and eventually end up fixing this by changing wallpaper automatically on your iPhone. Here are some potential causes and solutions:-
1. Focus Mode with assigned wallpaper:-

  • Focus Modes allow you to customize your iPhone’s notifications and appearance for different situations like “Sleep” or “Work.”

  • These modes can also have a designated wallpaper. If a Focus Mode with a specific wallpaper is activated, it might change the wallpaper unexpectedly.

Solution:-

  • Go to Settings > Focus.

  • Check each Focus Mode (Sleep, Work, etc.) and ensure no wallpaper is assigned. If there is, tap on the mode, select “Customize Screens,” and tap the “-” sign next to any unwanted wallpaper.
    2. Dynamic wallpapers:-

  • Live wallpapers and Dynamic wallpapers on iPhones can automatically change throughout the day or based on specific conditions.
    Solution:-

  • Go to Settings > Wallpaper.

  • If you see a Live wallpaper or Dynamic wallpaper selected, choose a different, static wallpaper.
    3. Accessibility feature:-

  • The “Reduce Motion” accessibility feature can minimize animation and movement on your iPhone, potentially affecting wallpaper transitions. In rare cases, this might cause the wallpaper to appear changed.
    Solution:-

  • Go to Settings > Accessibility > Motion.

  • If “Reduce Motion” is enabled, try disabling it temporarily to see if the wallpaper changes stop.
    4. Software bug:-

  • Occasionally, software bugs can cause unexpected behavior.
    Solution:-

  • Ensure you have the latest iOS version: Go to Settings > General > Software Update. Install any available updates.

  • Restart your iPhone: A simple restart can sometimes resolve temporary glitches.
    More details instruction below.
    https://www.youtube.com/watch?v=eFNddXjP8jA&ab_channel=TheGeekPage

9

I use a piece of CSS to detect iOS and unset fixed property.

// Correct iOS not supporting fixed BGs
.unfix-ios-bg {
    @supports (-webkit-touch-callout: none) {
        background-attachment: initial !important;
    }
}

Then just add the unfix-ios-bg class to any element with a scrolling bg.

2 Likes
10

If this works (not tested) it’s a great solution @yalcin ! :+1: