lax.js
lax.js copied to clipboard
Use correct API for determining screen dimensions
visualViewport is widely supported and I believe it is the preferred method for determining logical screenHeight. clientWidth and clientHeight do not I believe take zoom into account and also clientHeight is on iOS devices just the height of the page (so it never changes)
Separately, I believe the window.onresize API is also insufficient for our purposes as this event is not guaranteed to fire at 60fps whenever visualViewport changes. My solution is to listen for changes directly: (I am only concerned about height changes for my purposes):
var set_height = function() {
var current_height = window.visualViewport.height
var lax_height = lax.windowHeight
if (current_height != lax_height) {
lax.onWindowResize()
}
requestAnimationFrame(set_height)
}
requestAnimationFrame(set_height)
Curious for your thoughts!