The vertical display size of the screen creates a quick flickering effect while scrolling on smartphones

Question

The vertical display size of the screen creates a quick flickering effect while scrolling on smartphones

While developing my website, I made extensive use of vh units. However, I noticed that in mobile browsers like Chrome, the browser's address bar disappears when scrolling down and re-appears when scrolling back up.

The problem is that this resizing causes all elements on my page to adjust due to the changes in document height caused by the address bar. Is there a workaround for this issue? Perhaps calculating the current device vh using jQuery initially and then converting all measurements to pixels instead of vh?

Any other suggestions or solutions would be greatly appreciated.

Thank you!

jquery css responsive-design viewport

Answer 1

Answer №1

I recently encountered the same issue and found a solution that worked for me:

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

If you have multiple elements requiring this adjustment, you can add a class to all of them and use the following code:

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

Answer 2

I recently encountered the same issue and found a solution that worked for me:

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

If you have multiple elements requiring this adjustment, you can add a class to all of them and use the following code:

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

The vertical display size of the screen creates a quick flickering effect while scrolling on smartphones

Answer №1

Similar questions

How to align the last item in the bottom row using Flexbox styling

What is the best way to attach click handlers to a separate class?

Ways to avoid grid overflow

Incorporating an image within a table while maintaining 100% height: A step-by-step guide

Highcharts: generating numerous series utilizing JSON dataset

Prevent all elements sharing the same class from expanding upon clicking if their parent element

Tips for switching background images upon hovering over different elements

What is the best way to separate content into columns with a border in WordPress?

How can I make the default value change upon loading the page using jQuery?

"Enhancing iPhone User Experience with CSS Hover Effects

Activate Bootstrap modal using an anchor tag that links to a valid external URL as a fallback option

Initiate an animation as you scroll down

Submitting a Form with Ajax and JQuery in .NET

"Incorporate a search bar into the drop-down menu for easier

When viewing a page in IE 9 within a frame, not all CSS styles are properly rendered, causing it to enter Quirks mode

Modify the original source data of an HTML table

Issue with Bootstrap 5 and vertical ruler (vr) not displaying current color

Why does the jQuery "alert" function work, but the image "src" setting is being overlooked?

What steps can I take to resolve the issue of Images and CSS not loading properly in my project?

What is the best situation to utilize $(document).ready()?