Img rendering skips multiple frames resulting white flash

• Component: Layout and Rendering
• Status: NEW ---

[Roland Soos]

Steps to reproduce:
1. Open https://smartslider3.com/bugs/webkit/imglaterendering/
2. Click/tap on the right arrow

Expected result: The next image instantly "replaces" the current image

What's went wrong:
There is a few white frames after the image switches to the next one.

The white frames appear only if the rendering of the second image is not cached. So if you click the arrow multiple times, the change will be fine every latter change to that image. 
On iPad and iPhone, use new private window for every tests as it seems like there is a session wide image rendering cache and only the first change will cause this rendering error even if you refresh the page.


Able to reproduce on OSX Safari 14.1, iPhone 14.4.2,  iPad 14.5.1

[Roland Soos]

I tried to use image.decode() API, event with 
image.decode().then(function(){
  requestAnimationFrame(function(){
    hideLastImage();
    showNextImage();
  });
});

But it produced the same behavior as the original code.

[Said Abou-Hallawa]

(In reply to Roland Soos from comment #1)
> I tried to use image.decode() API, event with 
> image.decode().then(function(){
>   requestAnimationFrame(function(){
>     hideLastImage();
>     showNextImage();
>   });
> });
> 
> But it produced the same behavior as the original code.

Why do you need to call hideLastImage() before calling showNextImage()? Hiding the image might be the cause of this flickering. I think something like this should work:

    var image = new Image;
    image.src = "images/imageslider-background.jpg";
    image.decode().then(() => {
        document.querySelector("imageslider").src = image.src;
    });

Also your test case has the following markup for the <img> elements:

    <img src="images/imageslider-background2.jpg" alt="" title="" loading="lazy" class="skip-lazy" data-skip-lazy="1">

Is there a reason for adding the loading="lazy"?

[Roland Soos]

Said Abou-Hallawa: That example was only just a theory. Yes, I can do the following:
image.decode().then(function(){
  requestAnimationFrame(function(){
    showNextImage();
    setTimeout(hideLastImage, 500);
  });
});

Poetical question: What is the right timeout to hide the last image to avoid white area? -> The image.decode() promise should indicate when an image can be rendered and when fulfilled we want that image to show in the next frame, right? Or else I can accept if that promise get fulfilled later when the image ready to render. It is not acceptable to get an empty area for a few frame when the promise fulfilled. This is how the specs describe it: https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element:dom-animationframeprovider-requestanimationframe


That loading="lazy" attribute gets changed by JavaScript to "eager". Also I can see on my testcase in the network tab that the next image loaded, also the image.decode() promise is fulfilled and still there is a white flash which shouldn't.

[Radar WebKit Bug Importer]

<rdar://problem/78711438>