react-div-100vh icon indicating copy to clipboard operation
react-div-100vh copied to clipboard

height is sometimes wrong when browser height shrinks

Open cinnabarcaracal opened this issue 4 years ago • 2 comments

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.

cinnabarcaracal avatar Dec 22 '20 23:12 cinnabarcaracal

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

iamthesiz avatar Jan 06 '21 02:01 iamthesiz

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

mvasin avatar Nov 07 '21 21:11 mvasin