1417111 - Images not rendering in "flipbook" animation

Status: UNCONFIRMED

(Core :: Layout: Images, Video, and HTML Frames, defect, P3)

Description

[Michael Sager]

User Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20171112125346

Steps to reproduce:

I have a web page that loads a large number of images and displays one at a time in a "flipbook" type of animation. The page loads each image into a hidden span element and uses the "complete" property of the image object to determine whether it has loaded or not. To display an image, I have tried two methods:

1. set the visibility attribute of the span with the image to "visible"
2. create another image object and set the src attribute to the source of the image I want to show.


Actual results:

When a large number of images are loaded onto the page, some of them do not render. the javascript attributes .complete and .naturalWidth and .naturalHeight indicate that the image has been loaded successfully from the server, but the image does not render and the part of the page where the image should be is just blank. I can inspect the element and see the correct image source or use "view image" or "copy image location" and see the image, but it does not display where it is supposed to on the page. The problem starts to occur when the number of images on the page gets to somewhere around 350. 


Expected results:

The image should have rendered on the page.

Comment 1

[Kohei Yoshino [:kohei]]

Please provide a testcase or URL of the page.

Comment 2

[Timothy Nikkel (:tnikkel)]

Try just changing the src of just one img element (ie img.src=1.jpg, img.src=2.jpg, ...). Preload the images using different imgs element that you don't display. That should do what you want.

Comment 3

[Michael Sager]

The problem is showing up on a page on a subscription site... I will see if I can create a test page that demonstrates the issue without authentication.