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?
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.
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
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?
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.
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.