When multiple animated GIFs are placed in multi-column container, Safari (10 and TP) will manage to play only a few of them. More GIFs you put in, higher chance they fail to play. This is happening only when the value of `columns` property is greater than 1. How to reproduce: 1) Open https://jsfiddle.net/sdxaxuv5/ 2) Usually last two images (in 3rd column) fail to start playing. 3) Change `columns` property's value from 3 to 1, and the issue will disappear. Checked on both iMac and iOS. Other browsers play all the images.
<rdar://problem/30382262>
This is not an image drawing or animation issue. It is a rendering issue. I think it is related to column layout. In the test case https://jsfiddle.net/sdxaxuv5/, RenderElement::newImageAnimationFrameAvailable(), which is called via BitmapImage::advanceAnimation(, succeeds to call RenderObject::imageChanged() for the first four <img> elements in the column <div> element. But it fails to call it for the last two <img> elements. This happens because shouldRepaintForImageAnimation() returns true for the first four images but it returns false for the last two images. Because the image rect is not marked for painting, the last two images do not animate. Fixing the repaint issue should force the image to draw the next image frame.
Created attachment 303659 [details] Patch
Comment on attachment 303659 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=303659&action=review Has this ever worked? > Source/WebCore/rendering/RenderBox.cpp:2301 > + if (is<RenderMultiColumnFlowThread>(this)) { is<RenderMultiColumnFlowThread>(*this) > Source/WebCore/rendering/RenderBox.cpp:2309 > + if (RenderRegion* region = downcast<RenderMultiColumnFlowThread>(this)->physicalTranslationFromFlowToRegion((physicalPoint))) { if (auto* region = downcast<RenderMultiColumnFlowThread>(*this).physicalTranslationFromFlowToRegion((physicalPoint)))
Fixed in r213523.
Comment on attachment 303659 [details] Patch Seems like this could be tested via tracking repaint rects.