search

alpinejs / alpine

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

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

Open signorekai opened 3 months ago

signorekai commented 3 months 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 months ago

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

signorekai commented 3 months 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 3 months ago

Interesting.

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