On iPad, switching to Safari from another app causes the page to zoom in

[arcanemachine]

Using a 2018 iPad on iOS 15.1, when you switch out of a Safari page containing a Muuri grid (both my own and the muuri.dev page do this), and then switch back, the page has abruptly zoomed in. Not all the time. Sometimes it doesn't. Most of the time, it does.

I am having troubles with Safari detecting the proper window width, and I believe it may be connected to that. Initial renders show a width of 1024, but switching back causes the code to display 1280, or other arbitrary numbers.

This does not happen on my iPhone, or any other device I have tested.

[niklasramo]

@arcanemachine Thanks for reporting! As I don't have an iPad and can't replicate the issue could you possibly do a screen recording of the issue? Would probably help a lot grasping it better 🙂

[arcanemachine]

OK, so I'm quite certain it's related to a WebKit bug, possibly this one. It seems that when returning to the app, Safari calculates incorrect values for document.documentElement.clientWidth. I've tried changing the Muuri code using a few other similar values (e.g. document.body.clientWidth), but I keep getting the same issues.

YouTube video showing my own grid jumping when returning to Safari (bonus: the end shows a list of listeners fired when the app switches). This video also shows the calculated clientWidth in the title. Safari is out to lunch.

YouTube video showing muuri.dev doing the same thing.

When this happens, there are no events fired until the user scrolls down enough to hide the address bar, which triggers a resize event. This results in a very unfriendly user experience. Also, there is no method to zoom out the device using JavaScript, as far as I know.

The best working fix I've found so far is to reload the page when an iPad device fires a visibilitychange event, which is obviously not a very effective solution.

[niklasramo]

Thanks for the videos @arcanemachine, I can immediately see one issue which might or might not be linked to the zooming issue. In the first video (https://www.youtube.com/watch?v=iFlXJVIYRBg) the first switch to Safari shows that Muuri first tries to resize the grid to fit smaller dimensions and right after resizes again to fit the correct dimensions. This suggests that there are at least two resize events triggered in the beginning when switching back to Safari and on the first one the window dimensions are incorrect.

Gladly, you can fully override this logic in Muuri and build a workaround for your use case. Just set layoutOnResize to false and call grid.refreshItems().layout(); whenever you see fit, that's the piece of code that layoutOnResize calls (debounced) on resize event (https://github.com/haltu/muuri/blob/master/src/Grid/Grid.js#L1709).

If you still see the zooming happening after you disable layoutOnResize then let's poke this issue more.