Tablet Horizontal View - Background Image does not display correctly

Thanks, but that’s exactly what I did before I began the site on web flow.

All my container is auto width, but I added that code in my custom code tab…exactly that.

What’s confusing is that the image I see in Tablet Landscape is not even in my images folder, but it appears (cache cleared on safari tablet) - It happens on Chrome Application on iPad as well.

I looked up your account and saw that you have radio-studio.jpg in that section. You can remove it by clicking on Image & Gradient blue link and removing that property from that “Section, SNCF Guy” selector.

1 Like

Thank you so much for taking your time to help. I will give this a try :slight_smile:

@thesergie @liberrtines I’m having the same issue. For me, it’s an issue with the “fixed” option. If you have a banner that scrolls/parallax on desktop view, the image enlarges and pixelates when looked at on an ipad & phone. It’s challenging since it still looks fine through Webflow’s UI.

If you lock the “fixed” option and make sure “Cover” is selected, that should work around the issue.

Not sure how to do parallax on ipad & phone - haven’t actually figured out how to solve the issue yet.

I’m still having this problem.

Is there a staff here that can help me resolve this?
I tried to lock ‘fixed’ with cover selected, but on landscape on my iPad, the images are still pixalated and extremely large. I tried to remove my custom container of 1290 and keep it default, but still the same problem.

Please help :frowning:

@liberrtines yeah, I bumped into the same issue this weekend. It’s visible on both the default 960px responsive grid and my other version of the same site - one that was 1140px. I’ve turned it on/off a bunch of times now, and for me it’s definitely been an issue with the ‘fixed’ option.

Here is how I solved it:

  1. Make sure ‘cover’ is selected.
  2. Make sure ‘tile’ is off (“x” should be selected)
  3. Make sure ‘fixed’ is off (“x” should be selected)
  4. After the project saves, re-publish your project. It may take a few moments for your sites’ changes to load so if you don’t see anything try clearing your history/cache and reloading.

I’d recommend opening up your dashboard/project settings in a new tab. It allows you to work in one window then publish quickly in another.

@thesergie @liberrtines - been playing with this a little bit - I definitely think it’s a Webflow bug.

If you want your desktop website to have a fixed cover effect, set it to be visible on desktop only. Then copy the image section to your other views, make sure fixed is off, and have this version visible on tablet & phone views only (not desktop).

Result is that image will be fixed on desktop, and ‘flat’ on vertical tablet & both phone versions.

Unfortunately, your image will still be pixelated on horizontal tablet view until bug is fixed.

1 Like

@Todd @liberrtines that’s really odd behavior and sounds like a bug with the background image inheritance. Sorry for the workarounds! We’ll be pushing a fix this week or next week that should clear this up.

1 Like

Thank you Todd for the tips, and thanks Sergie for trying to fix this odd bug!

Same problem occurring here. On desktop everything looks OK, tablet portrait OK, smartphone portrait + horizontal OK,… However I discovered on tablet horizontal view backgrounds are same as problems described above.

If you wish, check my page on tablet. You can see on portrait it looks ok, but on horizontal view bg’s are messed up.
http://www.rowan-saran.nl

Looks like a bug!

@rowan thanks for pointing this out! We’ll look into why this is happening on tablet landscape.

@rowan @liberrtines Thank you for your patience! I’ve been investigating this odd issue, and it turns out that it was caused by an extra parameter that was specified in the <head> section of the code that we exported:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

It needs to be changed to this:

<meta name="viewport" content="width=device-width">

I’ve updated our publish template to reflect this change, so if you re-publish (or re-export), it should fix it for you. However, please let me know if it does not, and I will take a deeper look.

Thanks again for helping us figure this out!

Problems seems partially fixed. Although still some background images are not shown correctly.
These images have a “fixed” style in default view. Other background images with a “Scroll” view are shown ok.

Ipad landscape view should show default view, no? Maybe background images with “fixed” setting create an error for landscape view?

I guess it was persistent cache!!

It shows perfect now!!! Thanks.

1 Like

@rowan, have some unwelcome news: we have decided to revert the change above, so you will likely see this bug appear again if you re-publish.

The reason we are pulling the change is that removing initial-scale=1 breaks the switch between portrait/landscape orientations on all iOS devices, so your customizations in Webflow between landscape/portrait don’t work as intended. Instead, iOS devices load the initial version (e.g. portrait if you happen to load the site in portrait mode) and then scales it for the other orientation. So switching to landscape mode (wider screen) after loading in portrait shows a pixelated version that was intended for the narrower screen.

In other words, the change above breaks a lot more sites than it fixes. :\ Going back to the drawing board to figure out how to fix the background-image: cover issue that you’re seeing…

Currently, the only known workaround is to set background-attachment: none; (not fixed, so uncheck the Fixed option in Webflow), but that does affect the desktop resolution as well (since ‘Tablet Portrait’ has the same resolution as desktops).

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

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

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

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