Problem with 100vh
Hello, I have a problem with an animation and would be really grateful if someone could help me.
The link to the page is here: https://clippathsite.webflow.io/
The problem is that on iPhone devices, the bottom bar on the iPhone covers the text located in the bottom right corner of the phone. That text is a description of the image that is displayed and changes during scrolling. The text is visible while scrolling down, but when the user starts scrolling back up towards the top of the page, that bar appears and covers the text because everything is set to 100vh. I’ve tried using dvh and svh, but I haven’t been able to find a solution. How can I move the text upwards above that bar when the user scrolls back up towards the top of the page? I hope I’ve explained it well.
Preview link: https://preview.webflow.com/preview/clippathsite?utm_medium=preview_link&utm_source=designer&utm_content=clippathsite&preview=4e393b3a96b4c90e4eae9d9f581a9a5f&workflow=preview
Everything works fine on desktop; the issue is only on mobile devices.
3 Replies
Yo I took a look this is a tricky one. You might need some JS to observe the screen height and adjust the container height based on it
It’s really annoying how the browser bar hides and shows
I took a look at it but don’t have an immediate solution
You might investigate full page JS
The animation is really beautiful, and you can create whatever you imagine by changing the clippath, just like your animation here: https://fixed-image-gallery.webflow.io/ or reveal the image from the middle upwards and downwards, or left and right. But there has to be some text somewhere 😅 . I’ll try what you suggested, thanks a lot!
Fixed Image CMS Scroll Gallery
Scroll through CMS Images with a fixed background feel.
I’ve been trying for a few hours, but something always glitches, either Safari or the image. Sometimes it's just better to give up. For now, I’ve placed the text in the top right corner, and it works fine there.