Sohail Sohail - 1 month ago 11
jQuery Question

viewport height makes a snappy flicker when scrolling on mobile devices

So I used a lot of vh in my website, in mobile browsers when you scroll down the page the browser's address bar disappears and when you scroll back re-appears (such as chrome)

my issue is when this happens everything in my page resizes due to differences that adress bar makes in my document's height

is there any work-around for this such as calculating your current device vh at first using jQuery and then converting everything to px instead of vh?

or any other suggestions

Thanks

Answer

I battled with this exact same issue a few days ago and the solution I came up with was something like this:

$(window).on('load', function() {
   var $vhElement = $("#vhElement");   //Your element with 100vh
   var height = $vhElement.height();   //Get rendered height in px
   $vhElement.css("height", height + "px");  //Override vh height with px height
});

If you have multiple elements that need this, you can apply a class to all of them and use the following

 $(window).on('load', function() {
   var $vhElements = $(".vhElement");   //Your elements using vh
   $vhElements.each(function() {
       var height = $(this).height();   //Get rendered height in px
       $(this).css("height", height + "px");  //Override vh height with px height
   });
});