Hi, I feel like I’m missing something obvious. I’ve got a section set to 100 VH with a fixed background in mobile view. On preview and published on desktop at the mobile device breakpoint, it stays fixed. But on iOS it scrolls. I don’t want it to. I’ve seen other people have this problem but haven’t seen a solution yet. Help?
EDIT: it’s on the video page, not the home page
Here is my site Read-Only: [LINK]1
(how to share your site Read-Only link)
Ok I know this sounds stupid… lol But just toggle that off and then back on and see if that fixes it!
Make sure you are in the mobile breakpoint too when you do!
Hey guys!
I am having the same exact issue…
I have a background image on my third section (sized to 100 VH) that is supposed to be fixed.
The behavior works in preview and after I publish to staging on desktop browsers. But no luck on mobile.
I tried toggling on and off the mobile in the settings for the section (with mobile breakpoints selected) but no luck.
Seeing that there are threads about this issues going back a couple years on these forums, this seems to be an ongoing or reoccurring issue.
TO STAFF - Has there never been any resolution via Webflow updates? Seems like a major bug.
Damn, that sucks. Um, maybe since you already toggled it… try making a small change to it. then toggle it. then publish. then change it back. then publish again. I know this seems weird but I have personally had the same problem and I did these things and it worked. Couldn’t hurt right. What seemed to happen for me was jogging designer somehow. If it is a glitch.
Ok, according to an earlier STAFF REPLY, this is being caused by some javascript code purposely added to prevent fixed backgrounds on mobile…
We actually have some javascript in place which prevents fixed backgrounds images from rendering as fixed on touch screen devices. We do this because there are some known repainting css issues caused by fixed background images on elements (it’s also really heavy on CPU’s).
A work around which you can try is set a Fixed element as the background, try the following:
- Add in a div, call it “Fixed background” (or whatever you wish)
- Set the div to Position: Fixed
- Width: 100%, Height: 100vh (type in 100vh so that it takes up the full viewport)
- Adjust the z-index of this element to sit behind all other elements
Thanks! I’ll try! @Noah-R, I tried the toggling thing but alas. Thanks anyway.
It worked!! Only thing is, in Chrome, 100VH changes when you scroll because it adjusts for the browser’s navigation bar to disappear, which is super annoying. It jitters as you scroll. Anyone got a work-around for this?
That’s awesome to hear!! Im glad it worked!
Do you have to use VH? What about %?
Same issue, because the height of the browser window changes when you scroll. Ugh.
Im kind of confused… Can you send me just a published link?
Interesting…
I find the fixed image for a hero position more wonky on iOS Safari (when bottom bar disappears on initial scroll down) than on iOS Chrome.
What’s annoying on Safari is that it chops off the bottom of the image, and the rest of the image takes a sec to load after you scroll, leaving white space. But if it didn’t, it would jitter like Chrome, because it would resize itself.
Agreed.
Maybe fixed image is not a good idea for the top hero position in mobile for now because of this.
It’s not even just fixed images, it’s anything set to 100VH that jitters on Chrome.
Via the workaround — nesting a div in the section with a fixed background image instead of at the section level — I finally got mine working pretty nicely in iOS Safari, portrait view.
(third section down)
But as you have pointed out, I am also having issues in iOS Chrome and my hero section rendering at the proper vertical height — in this case a background vimeo embed, but that’s another issue.
For joy! 
You know what I would do. I would create a new section and paste the photo in a div that is set to 100% width and make that div fixed and keep the z-index low so your content below will slide over it. And I just would not use a 100vh for mobile anyway. In my opinion I think its a ton of wasted space on mobile. Just my opinion though. But I would try that with the div and you can hide the div on all other breakpoints if you wish. Also instead of 100vh, if that div is fixed with the photo set it to full screen. It will basically be 100% both width and height and I cannot see that NOT working you know lol.
Totally missed your comment as I just stated something pretty much the same haha. But yes that’s what I would do. Glad you got that working man!
Sounds like maybe 100vh is to be avoided on all mobile browsers whose viewports dynamically change with scrolling…
