search

alexfoxy / lax.js

Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.
MIT License
10.43k stars 491 forks source link

Use correct API for determining screen dimensions #162

Closed RogerPodacter closed 1 year ago

RogerPodacter commented 3 years ago

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!