search

alpinejs / alpine

A rugged, minimal framework for composing JavaScript behavior in your markup.
https://alpinejs.dev
MIT License
27.92k stars 1.22k forks source link

Added `.viewport` modifier to `x-on` directive to add listeners to `window.visualViewport` instead #4350

Open signorekai opened 3 weeks ago

signorekai commented 3 weeks ago

Problem

On iOS Safari (v17.3), resize events on window does not fire immediately to viewport resizes (caused by browser chrome hiding address bars). However, it does fire almost immediately when binded to window.visualViewport.

Solution

Added .viewport modifier to x-on directive to add listeners to window.visualViewport

SimoTod commented 3 weeks ago

Does the resize plugin (x-resize) have the same issue?

signorekai commented 3 weeks ago

Yes it does.

Screenshot 2024-08-23 at 4 56 38 PM (from iOS inspector)

As the user scrolls and the browser starts to hide the address bar, the resize event for window.visualViewport gets called almost immediately while the x-resize only gets called at the end of the scroll (after easing).

ekwoka commented 2 weeks ago

Interesting.

Could this be an issue where the listener should be passive or you risk causing issues?