mvasin / react-div-100vh

A workaround for the '100vh' issue in mobile browsers

Home Page:https://react-div-100vh.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

height is sometimes wrong when browser height shrinks

cinnabarcaracal opened this issue · comments

commented

When I shrink the website height by resizing my browser (Chrome Desktop Version 87.0.4280.88) the height (output of the measureHeight function) is sometimes too small by 15px.

This means a 15px tall white bar along the bottom of my site flicks into and out of existence as I shrink the browser.

As I drag the bottom of the window up, every 2nd call to measureHeight returns the incorrect value.

There is no issue when increasing the window height.

The odd thing is if I stop resizing the window once I get a bad value, and then use the console to get the documentElement.clientHeight, I get the correct value. It's almost like the browser hasn't updated the documentElement.clientHeight when measureHeight runs, but then it does so right after.

This does not happen when I activate the device toolbar, switch it to responsive and shrink the height there.

Does anyone else have this issue? I'm not sure if it is a browser bug, something in this library or most likely just something odd with my site.

I'm pretty sure this also affects when the keyboard is opened the height will be incorrect.

Hi @cinnabarcaracal! I released this change https://github.com/mvasin/react-div-100vh/pull/74/files as react-div-100vh@0.7.0-beta.1. Chances are it will help. Can you try it out?