Tablet Horizontal View - Background Image does not display correctly

Design help General
21

Just to chime in here, we’ve narrowed down the issue to background-attachment: fixed on iOS devices.

We’ll be pushing a fix shortly that prevents background-attachment: fixed on mobile devices in general, to avoid any Android issues as well.

-Dan

22

Ok gang, the fix for this has been pushed live. Going forward, background-attachment: fixed will be disabled on mobile devices. It will still work on all desktop browsers and media queries, just disabled for all mobile user agents (via javascript).

If a new iOS update comes along that fixes the bug, we’ll whitelist for that version.

-Dan

1 Like
23

@danro Cool! Is there a quick way to fix this in code that we’ve already published/deployed?

24

For webflow hosted sites, simply re-publish and you’re good! :thumbsup:

For code exported before the patch, you’ll need to manually update, following these steps:

1) In your HTML, add this script inside the <head> tag

<script>if (/mobile/i.test(navigator.userAgent)) document.documentElement.className += ' w-mobile';</script>

2) In your CSS, add the following rule:

.w-mobile * {
  background-attachment: scroll !important;
}

-Dan

1 Like