images are rendering mixed up on iPhone X

[olets]

~It's possible this is not related to lazysizes.~ Update: This was happening specifically with Safari on iPhone X, multiple models. Rolling back lazysizes seems to have fixed the problem

The reporter first noticed it when I implemented lazysizes. I haven't been able to reproduce this bug myself, so I'm afraid I'm short on details. If the answer is just "can't help you" that's fine. But maybe it'll make sense to you.

I'm using lazysizes ^4.1.5 throughout a site to lazy load images. There's a bug where in one below-the-fold group of seven images the first image is sometimes replaced with some or all of the second:

I'm using the bgset plugin elsewhere, but these are <img> not background images.

This is reported on slow connections specifically.

Thinking "bug two" is a more extreme version of "bug one."

[fantenra]

Hi, having the same problem. Did you solve this or maybe get more understanding of it?

[aFarkas]

For me this bug report is bad in different ways. Even if a bug is hard to reproduce or only sometimes to reproduce you don't have to include only information about what is happening and what you expect, but also what you have to do to (at least) sometimes reproduce it. Especially a simplified testcase would help. Otherwise I can't give advise.

The other thing is that I don't seem to understand the bug. If an image element doesn't show the right img, you should check wether lazysizes has transformed the img element in the right way. This is basically the only thing you have to check wether it is somehow lazysizes related. As I understood the bugreport one img element shows multiple fractions of other different img elements. If that is true it is clearly not a DOM related bug (can't be a lazysizes bug) but is probably a rendering issue. Normally you fix those kind of safari bugs using different CSS properties.

Normally adding or removing one or more of the following CSS rules to/from the img or an ancestor element solves these kind of problems:

-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform: translateZ(0);
will-change: transform;
-webkit-filter: none;

[olets]

You're right that this is an unusual bug report. I agree that it seems to be a rendering issue, and I expect that the root issue is some hardware change in iPhone X — the problem has not been reproduced with other iPhone generations, or Androids. Signal strength might be a factor too, so conceivably some resource allocation thing? Still, it only happens with images targeted by lazysizes so this seemed like the right place to write it up and see if anyone else was having the same issue. Hopefully we can figure out either a change for lazysizes or at least a workaround or list of limitations.

Sorry if I wasn't clear about how to reproduce: use an iPhone X to visit a page that has lazysizes enabled. Reload a bunch of times and see if this happens. I don't know the exact conditions and can't say exactly what percentage of the time it happens. If there are implementations where it doesn't happen, that would be useful information.

I'm using a <img> implementation with blur. I'm also loading in background image support. (I have not yet had any reports of problems in the places where I'm using a background image — the original post is specifically from places where I was using an img element.) I have a blur-related transition.

import 'lazysizes/plugins/bgset/ls.bgset.min'
import 'lazysizes'

<img data-src="..." data-srcset="..." class="lazyload blur-up"/>

.lazyload {
  opacity: 0;
  transition: filter 400ms,
              opacity 400ms;

  &.blur-up {
    filter: blur(5px);

    &.lazyloaded {
      filter: blur(0);
    }
  }

  &.lazyloaded {
    opacity: 1;
  }
}

Wouldn't hurt to experiment with the styles you mention, also worth testing transition styles. I can do that and report back. Currently I'm split testing that basic implementation against a background image implementation to see if that helps. I don't have an iPhone X myself, and the problem does not manifest in Simulator, so testing is slow.

@fantenra have you tried switching to background images, or trying different styles?

[fantenra]

@olets No, I didn't try anything yet, cos I don't have iPhone X either. I'm using simple images with blur. I had the same issue on the other project, but back then I thought it was because of gsap parallax scroll script. So when I turned it off this rendering/scroll problem stopped. But now this seems like it's not only that what causes the bug. I tried to search for some info related to this glitch, but this is the first topic where I found a detailed report. By the way, sometimes my images not replaced with the different image parts but just distorted. Appears in Safari and Chrome on 12.2 iOS, lazysizes v.4.1.4

[Terryda]

I am having the same issue. It only happens on iOS. I have tried a few css tricks, but I haven't found anything that works. If you load the site on the slow connection and scroll fast down the page to invoke the lazy load, you end up with this:

The image on the left should be a woman in a green outfit. Sometimes both images are a duplicate of the one on the right, but sometimes they are interlaced like above.

[benoitemile]

I had this one, seems to be a safari bug while messing around with filter property. Ended up removing filter and blur up at all 🤕

[olets]

@benoitemile interesting!

@Terryda what generation of iphone is that from?

[eddiedale]

Having the same problems on iPhone X and XR with v. 4.1.6. I had a blur filter on the lazyload class, and removing this seems to have fixed the issue. Thanks @benoitemile !