Lazysizes: Overlapping images on iPhone 7 / iPhone 7 Plus

[Legic]

On our website pages www.justhype.com.au (frontpage glitch: https://cl.ly/0h412f431K04 ) and https://justhype.com.au/collections/view-all-womens (Collection page: https://cl.ly/2g3p2B1K2N1C , https://cl.ly/2n2l1k1j3a2d) we are having issues on the iPhone 7 & 7 Plus using the Safari browser.

We are using lazySizes with the RIaS extension.

A kind of glitch happens that is not reproducible using for example browserstack.com.
We have used 3 different phones and the same issue occurs.

While scrolling down, some of the 100x images get loaded in and overlap with others. Sometimes this produces pixelated screen glitches.

[benoitemile]

I had it too, I had to take unload extension, it seems like if safari iOS has too much images (retina images are super-heavy and in memory if they've been displayed).

[aFarkas]

This is obvious a CSS error. Normally one or more of the following CSS properties help:

-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;

You "only" have to find the elements/selector for this property. Good luck!

[davidgovea]

ping @Legic - this issue report helped us hunt down a similar problem in our apps. When returning to the app, some images would 'duplicate'. This happened only on iPhone7 and above (iPhone 6 and SE did not show the bug, even on the same OS versions - GPU related?).

In our case, the classic -webkit-transform: translateZ(0); applied to the image element helped avoid the odd image thrashing. Hope you've found a solution already, but thought I'd post anyways..

And while I'm here, aFarkas -- thank you so much for this amazing library and the years of active development! (not full-mentioning you intentionally to reduce noise -- sorry for the bit of necrobump here)

[Legic]

@davidgovea Awesome! The issue got resolved for me after I removed the filter CSS rules on the blur-up class (The class I use to have a blur effect while lazy loading the images). These:

-webkit-filter: blur(5px);
filter: blur(5px);