use window.innerHeight instead of document.documentElement.clientHeight

[mvasin]

After experimenting in BrowserStack with Safari on iOS versions from 10 to 15, I can confirm that document.documentElement.clientHeight is only updated after orientation change, so resize events caused by shrinking / enlarging of the URL panel don't have effect on document.documentElement.clientHeight, while window.innerHeight is being updated.

For reference (it was mentioned in #22 - the original reason to switch from window.innerHeight to document.documentElement.clientHeight, something that I revert here) - trying to extract values from document.documentElement.clientHeight and window.innerHeight won't work properly in the orientationchange event handler (the values are gibberish as the 4,5 year old bug https://bugs.webkit.org/show_bug.cgi?id=170595 is still not resolved), but iOS fires resize event after orientationchange where at least window.innerHeight looks correct, so I don't debounce orientationchange and rely on the resize event that follows.

I noticed that iOS 15 fires way more resize events on URL bar size change, so debouncing might still be necessary. But I will leave that for another update.

I also tried in Chrome on Android versions 8-11, the behavior is identical to iOS.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/vasin/react-div-100vh/6t6KMC2VszmchHrogGopCHxGinK8
✅ Preview: https://react-div-100vh-git-switch-from-clientheight-to-in-07120a-vasin.vercel.app

[Greenheart]

I tested this in [email protected] and it works for me. Thank you!

[mvasin]

@Greenheart thanks! published under version 0.7.0.