Performance issues and crashes on iOS

[derwaldgeist]

Hi, we created a video-heavy site based on lax.js:

https://marblever.se/v2

It works perfectly on Chrome. But if I try it out on Safari iOS, the page tends to reset itself after a bit of scrolling, and eventually causes Safari to crash. This is on a pretty powerful device, an iPhone 12 Pro Max. I downsized the videos quite a bit to prevent this and even experimented with lazy-starting the videos. But nothing helped so far.

Any idea what I can to do performance-optimize the behavior on iOS?

[alexfoxy]

Hey, do you have the source or an excerpt available anywhere? It would also be interesting to see the source files you’re using for the videos. I have an iPhone 13 pro and it does struggle pretty badly on both browsers. You have a lot of videos going which I imagine is overloading the GPU.

[derwaldgeist]

Thanks for the fast response! Do you have a Gitlab account, so I could give you access to the repo? The videos are transparent videos (HEVC for Safari and WebM for Chrome). They are converted from a H.265 transparent video via the Rotato app.

[derwaldgeist]

If I display the page without videos, it kinda works. Still a bit glitchy, but at least it won't crash. So it is definitely the combination of a lot of videos and controlled scrolling. I also tried deferred video loading. But this will cause too many delays, so the page does not show up correctly.

Hence, I tried to stop the videos after autoplaying them and to restart them once they are visible. My first approach was even more complex, I did not autoplay them but started them manually and immediately stopped them, so at least a couple of frames got preloaded. But neither approach worked.

[alexfoxy]

Videos are tricky! My gitlab id is 12040941.

[derwaldgeist]

Videos are tricky! My gitlab id is 12040941.

Can't find you with that ID. It requires a username.

[derwaldgeist]

Just a quick update: I made an optimized version where I replaced most of the videos with a static PNG. But still Safari on iOS crashes after a couple of pages. The strange thing is: If this is the case, some of the images won't be displayed anymore, since lax.js does not restore the scrolling positions after reload.

[derwaldgeist]

You can find the optimized version here: https://marblever.se/v2

And as soon I have your gitlab user name, I can add you to the repo.

[derwaldgeist]

BTW: We have another landing page built with the very same approach, but less scrolling pages: https://marblever.se/nfts This one works as expected, with no issues, even if I enable all the videos. It seems as if the longer page https://marblever.se/v2 causes a crash at some scroll position and then the whole browser tab crashes (only on iOS).

[alexfoxy]

Sorry, my user name is alexfoxy.

[derwaldgeist]

Sorry for the delay, I just invited you to the repo.

The full page can be accessed via https://localhost:3000/v2

It works perfectly on Google Chrome, but crashes my iOS devices.

[derwaldgeist]

I dug deeper into this issue and found quite a number of issues on Stackoverflow that suggested that Safari most of the time crashes due to memory issues. This especially happens if you have a lot of large elements on the page, which is the case in my page. Alll vertical scrolled elements are positioned outside of the viewport, on top of each other, but I guess even this matters.

The best solution I saw so far was to disable elements via display:none until they become visible. This would require lax.js to support a switch of the display state, which I think is currently not possible.

[derwaldgeist]

Did you have a chance to look at this?

[derwaldgeist]

Hey, just wanted to bump this, since we still have troubles on iOS. Do you still maintain this library?

[alexfoxy]

Sorry it’s very difficult with my full time job. I think the issue like you said is memory. You could achieve the display css using the on update function I think => https://github.com/alexfoxy/lax.js#onupdate-drivervalues-object-domelement-domelement--void