Bug 150344

Summary:

[GTK] Artifacts on animation with images, round borders, overflow:hidden and AC enabled

Product:

WebKit

Reporter:

Mario Sanchez Prada <mario>

Component:

WebKitGTK

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

bugs-noreply, cgarcia, cosimoc, mcatanzaro, mrobinson, yoon, zan

Priority:

Version:

WebKit Nightly Build

Hardware:

Unspecified

OS:

Unspecified

Attachments:

Description	Flags
Reduced test cases	none
Screenshot: the bug in action (rounding box visible)	none
Screenshot: how it should look (as in WebKitGTK 2.6 and Safari, for instance)	none

Mario Sanchez Prada

Reported 2015-10-19 15:23:12 PDT

Created attachment 263518 [details] Reduced test cases DESCRIPTION Starting with WebKit2GTK+ 2.8 and up to the latest code from trunk (tested with r191308), I can reliably reproduce some visual artifacts when Accelerated Compositing mode is enabled AND I try to combine two concurrent animations at the same time, where one them acts over an element defining round borders and the 'overflow: hidden' CSS properties, and the other one acts over an image. Note that this does not happen on OS X with the stable Safari (10601.1.56.2) nor with the latest Nightly build (I tried r191175) either, so it seems to be a bug exclusive to WebKitGTK+ (and maybe EFL) for some reason. For instance, the following code (providing a valid test-image.png, included in the attached test case), produces that weird effect: <html> <style> #testDiv .mask { border-radius: 50%; overflow: hidden; -webkit-animation: "shrink-mask" 5s; } #testDiv img { -webkit-animation: "grow-image" 5s; } @-webkit-keyframes shrink-mask { from { -webkit-transform: scale(1, 1); } to { -webkit-transform: scale(0, 0); } } @-webkit-keyframes grow-image { from { -webkit-transform: scale(1, 1); } to { -webkit-transform: scale(4, 4); } } </style> </head> <body> <div id="testDiv"> <div class="mask"><img src="test-image.png"></div> </div> </body> </html> As you can see, the idea behind this test is to have two animations working in parallel: one that steadily increases the size of the image up to 4 times, and another one that reduces the size of the container element, effectively working as both a "mask" that cuts the extra bits of the image we just grew outside of the "mask" (due to overflow:hidden), at the same time it reduces the whole thing. I've debugged this quite a bit and is still unclear why this is an issue specific to the GTK port and to Accelerated Compositing (e.g. it does not happen if we disabled AC by calling setAcceleratedCompositingEnabled(false)), but that seems to be the case as I could not reproduce it in the latest nightly, on OS X (and FWIW, is not a bug on Blink either). In any case, I've wrote a full test case that reliably reproduces the issue for me in two different machines (x86 and x86_64), so the bug looks real. Please see attached a compressed file containing two test cases: * index.html: basically the code snippet from above plus the test-image.png. ARTIFACTS VISIBLE HERE. * index-works.html: a similar version of the text where I try to get the same visual effect without using external images, just DIVs and CSS. NO ISSUES HERE STEPS TO REPRODUCE 0. (Make sure Accelerated Compositing is enabled in your build of WebKit, otherwise the bug does not happen) 1. Uncompress the contents of the attached file and load index-works.html in MiniBrowser 2. You should initially see a red circle inside a gray box with the text "Text" inside (not an image, just a DIV + real text with some CSS styling) 3. For 5s after loading, two animations make the text's dimension increase relative to its containing block (the circle) and the containing block reduced 4. While the animation is going on, the container block acts as a "mask", hiding the overflown content away 5. Now uncompress load index.html in MiniBrowser 6. You should initially see another red circle inside a gray box with the text "Text" inside (a real image this time) 7. For 5s after loading, two animations make the image's dimension increase relative to its containing block (the "masking" DIV) and the containing block reduced 8. While the animation is going on, the container block acts as a "mask", hiding the overflown content away EXPECTED OUTCOME: No artifacts are shown during the animations described in step (3) and (7). ACTUAL OUTCOME: When using a real image instead of simply a DIV+text with some CSS, the four lines defining the boundaries of the rounding box for the containing block that should be getting reduced and clipping the contents are displayed in some non-uniform way, rendered using the colour of the image's edges. Note that this problem does not happen in WebKit 2.6 or WebKit 2.4, but at least from 2.8.0 this seems to be an issue. Anyway, I'll be attaching two screenshots to better show how this bug really looks (using index.html) and how it should look (using the index-works.html)

Attachments
Reduced test cases (3.36 KB, application/x-compressed-tar) 2015-10-19 15:23 PDT, Mario Sanchez Prada	no flags	Details
Screenshot: the bug in action (rounding box visible) (33.54 KB, image/png) 2015-10-19 15:24 PDT, Mario Sanchez Prada	no flags	Details
Screenshot: how it should look (as in WebKitGTK 2.6 and Safari, for instance) (31.94 KB, image/png) 2015-10-19 15:26 PDT, Mario Sanchez Prada	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Mario Sanchez Prada

Comment 1 2015-10-19 15:24:19 PDT

Created attachment 263519 [details] Screenshot: the bug in action (rounding box visible) Now attaching an screenshot showing the bug happening

Mario Sanchez Prada

Comment 2 2015-10-19 15:26:16 PDT

Created attachment 263520 [details] Screenshot: how it should look (as in WebKitGTK 2.6 and Safari, for instance) And now another screenshot of how it should look if the bug is not happening (this screenshot has been taking by disabling AC mode from WebPreferences)

Note You need to log in before you can comment on or make changes to this bug.