OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Setting div to position fixed and 100vh causes 'jump' on mobile and tablet

  • Thread starter Thread starter Jana Lux
  • Start date Start date
J

Jana Lux

Guest
I am building a website with Webflow and encountered an issue that seems to be quite common. My Hero section is supposed to be 100vh and 100vw on all screens. And I also want it to set to position fixed, so that the content below it slides over it when the user scrolls down. On Desktop this all works fine but on Tablet and Mobile I have the issue with the browser's search / address bar.

Basically, once you scroll and the search/address bar minimizes itself, the screen kind off 'jumps' to again show the website in 100vh.

I read a lot about this but most solutions are from a few years ago and don't seem to work anymore.

Is there any code to fix this or should I just not use fixed positioning on mobile screens?
<p>I am building a website with Webflow and encountered an issue that seems to be quite common. My Hero section is supposed to be 100vh and 100vw on all screens. And I also want it to set to position fixed, so that the content below it slides over it when the user scrolls down. On Desktop this all works fine but on Tablet and Mobile I have the issue with the browser's search / address bar.</p>
<p>Basically, once you scroll and the search/address bar minimizes itself, the screen kind off 'jumps' to again show the website in 100vh.</p>
<p>I read a lot about this but most solutions are from a few years ago and don't seem to work anymore.</p>
<p>Is there any code to fix this or should I just not use fixed positioning on mobile screens?</p>
Continue reading...
 
Top