167901 2017-02-06 13:04:29 -0800 Animated GIFs fail to play in multi-column layout 2017-03-07 10:55:31 -0800 1 1 1 Unclassified WebKit Layout and Rendering Safari 10 All All RESOLVED FIXED InRadar P2 Normal --- 1 eprev hyatt beidson bfulgham hyatt sabouhallawa simon.fraser webkit-bug-importer zalan oldest_to_newest 1273689 0 eprev 2017-02-06 13:04:29 -0800 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. 1273690 1 webkit-bug-importer 2017-02-06 13:13:47 -0800 <rdar://problem/30382262> 1273761 2 sabouhallawa 2017-02-06 16:23:05 -0800 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. 1284331 3 303659 hyatt 2017-03-07 08:45:45 -0800 Created attachment 303659 Patch 1284335 4 303659 zalan 2017-03-07 08:52:25 -0800 Comment on attachment 303659 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))) 1284376 5 hyatt 2017-03-07 09:59:51 -0800 Fixed in r213523. 1284414 6 303659 simon.fraser 2017-03-07 10:55:31 -0800 Comment on attachment 303659 Patch Seems like this could be tested via tracking repaint rects. 303659 2017-03-07 08:45:45 -0800 2017-03-07 08:52:25 -0800 Patch bug-167901-20170307104546.patch text/plain 2579 hyatt SW5kZXg6IFNvdXJjZS9XZWJDb3JlL0NoYW5nZUxvZwo9PT09PT09PT09PT09PT09PT09PT09PT09 PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09Ci0tLSBTb3VyY2UvV2Vi Q29yZS9DaGFuZ2VMb2cJKHJldmlzaW9uIDIxMzUxNCkKKysrIFNvdXJjZS9XZWJDb3JlL0NoYW5n ZUxvZwkod29ya2luZyBjb3B5KQpAQCAtMSwzICsxLDE2IEBACisyMDE3LTAzLTA3ICBEYXZlIEh5 YXR0ICA8aHlhdHRAYXBwbGUuY29tPgorCisgICAgICAgIEFuaW1hdGVkIEdJRnMgZmFpbCB0byBw bGF5IGluIG11bHRpLWNvbHVtbiBsYXlvdXQKKyAgICAgICAgaHR0cHM6Ly9idWdzLndlYmtpdC5v cmcvc2hvd19idWcuY2dpP2lkPTE2NzkwMQorICAgICAgICA8cmRhcjovL3Byb2JsZW0vMzAzODIy NjI+CisKKyAgICAgICAgUmV2aWV3ZWQgYnkgTk9CT0RZIChPT1BTISkuCisKKyAgICAgICAgKiBy ZW5kZXJpbmcvUmVuZGVyQm94LmNwcDoKKyAgICAgICAgKFdlYkNvcmU6OlJlbmRlckJveDo6Y29t cHV0ZVJlY3RGb3JSZXBhaW50KToKKyAgICAgICAgTWFrZSBzdXJlIHRvIGhhbmRsZSB0aGUgY2Fz ZSB3aGVyZSB3ZSBwYXNzIGluIGEgbnVsbCByZXBhaW50Q29udGFpbmVyIGFuZCBuZWVkCisgICAg ICAgIHRvIGNyb3NzIGEgbXVsdGljb2x1bW4gZmxvdyB0aHJlYWQgLT4gcmVnaW9uIGJvdW5kYXJ5 IGFzIGEgcmVzdWx0LgorCiAyMDE3LTAzLTA3ICBBbnRvaW5lIFF1aW50ICA8Z3Jhb3V0c0BhcHBs ZS5jb20+CiAKICAgICAgICAgW01vZGVybiBNZWRpYSBDb250cm9sc10gU2V0dGluZyBhIHZhbGlk IHNvdXJjZSBhZnRlciBhbiBpbnZhbGlkIG9uZSByZXRhaW5zIHRoZSBpbnZhbGlkIHBsYWNhcmQK SW5kZXg6IFNvdXJjZS9XZWJDb3JlL3JlbmRlcmluZy9SZW5kZXJCb3guY3BwCj09PT09PT09PT09 PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0K LS0tIFNvdXJjZS9XZWJDb3JlL3JlbmRlcmluZy9SZW5kZXJCb3guY3BwCShyZXZpc2lvbiAyMTM0 ODApCisrKyBTb3VyY2UvV2ViQ29yZS9yZW5kZXJpbmcvUmVuZGVyQm94LmNwcAkod29ya2luZyBj b3B5KQpAQCAtNTksNiArNTksNyBAQAogI2luY2x1ZGUgIlJlbmRlckl0ZXJhdG9yLmgiCiAjaW5j bHVkZSAiUmVuZGVyTGF5ZXIuaCIKICNpbmNsdWRlICJSZW5kZXJMYXllckNvbXBvc2l0b3IuaCIK KyNpbmNsdWRlICJSZW5kZXJNdWx0aUNvbHVtbkZsb3dUaHJlYWQuaCIKICNpbmNsdWRlICJSZW5k ZXJOYW1lZEZsb3dGcmFnbWVudC5oIgogI2luY2x1ZGUgIlJlbmRlck5hbWVkRmxvd1RocmVhZC5o IgogI2luY2x1ZGUgIlJlbmRlclRhYmxlQ2VsbC5oIgpAQCAtMjI5Niw2ICsyMjk3LDIxIEBAIExh eW91dFJlY3QgUmVuZGVyQm94Ojpjb21wdXRlUmVjdEZvclJlcGEKICAgICAgICAgYWRqdXN0ZWRS ZWN0LmV4cGFuZChsb2NhdGlvbk9mZnNldCAtIGZsb29yZWRMb2NhdGlvbk9mZnNldCk7CiAgICAg ICAgIGxvY2F0aW9uT2Zmc2V0ID0gZmxvb3JlZExvY2F0aW9uT2Zmc2V0OwogICAgIH0KKworICAg IGlmIChpczxSZW5kZXJNdWx0aUNvbHVtbkZsb3dUaHJlYWQ+KHRoaXMpKSB7CisgICAgICAgIC8v IFdlIHdvbid0IG5vcm1hbGx5IHJ1biB0aGlzIGNvZGUuIE9ubHkgd2hlbiB0aGUgcmVwYWludENv bnRhaW5lciBpcyBudWxsIChpLmUuLCB3ZSdyZSB0cnlpbmcKKyAgICAgICAgLy8gdG8gZ2V0IHRo ZSByZWN0IGluIHZpZXcgY29vcmRpbmF0ZXMpIHdpbGwgd2UgY29tZSBpbiBoZXJlLCBzaW5jZSBu b3JtYWxseSByZXBhaW50Q29udGFpbmVyCisgICAgICAgIC8vIHdpbGwgYmUgc2V0IGFuZCB3ZSds bCBzdG9wIGF0IHRoZSBmbG93IHRocmVhZC4gVGhpcyBjYXNlIGlzIG1haW5seSBoaXQgYnkgdGhl IGNoZWNrIGZvciB3aGV0aGVyCisgICAgICAgIC8vIG9yIG5vdCBpbWFnZXMgc2hvdWxkIGFuaW1h dGUuCisgICAgICAgIC8vIEZJWE1FOiBKdXN0IGFzIHdpdGggb2Zmc2V0RnJvbUNvbnRhaW5lciwg d2UgYXJlbid0IHJlYWxseSBoYW5kbGluZyBvYmplY3RzIHRoYXQgc3BhbgorICAgICAgICAvLyBt dWx0aXBsZSBjb2x1bW5zIHByb3Blcmx5LgorICAgICAgICBMYXlvdXRQb2ludCBwaHlzaWNhbFBv aW50KGZsaXBGb3JXcml0aW5nTW9kZShhZGp1c3RlZFJlY3QubG9jYXRpb24oKSkpOworICAgICAg ICBpZiAoUmVuZGVyUmVnaW9uKiByZWdpb24gPSBkb3duY2FzdDxSZW5kZXJNdWx0aUNvbHVtbkZs b3dUaHJlYWQ+KHRoaXMpLT5waHlzaWNhbFRyYW5zbGF0aW9uRnJvbUZsb3dUb1JlZ2lvbigocGh5 c2ljYWxQb2ludCkpKSB7CisgICAgICAgICAgICBhZGp1c3RlZFJlY3Quc2V0TG9jYXRpb24ocmVn aW9uLT5mbGlwRm9yV3JpdGluZ01vZGUocGh5c2ljYWxQb2ludCkpOworICAgICAgICAgICAgcmV0 dXJuIHJlZ2lvbi0+Y29tcHV0ZVJlY3RGb3JSZXBhaW50KGFkanVzdGVkUmVjdCwgcmVwYWludENv bnRhaW5lciwgY29udGV4dCk7CisgICAgICAgIH0KKyAgICB9CisKICAgICBMYXlvdXRQb2ludCB0 b3BMZWZ0ID0gYWRqdXN0ZWRSZWN0LmxvY2F0aW9uKCk7CiAgICAgdG9wTGVmdC5tb3ZlKGxvY2F0 aW9uT2Zmc2V0KTsKIAo=