<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - [GTK] WebView flickers filled with a DIV's background color when AC is enabled"
href="https://bugs.webkit.org/show_bug.cgi?id=150365">150365</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>[GTK] WebView flickers filled with a DIV's background color when AC is enabled
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>WebKit Nightly Build
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Unspecified
</td>
</tr>
<tr>
<th>OS</th>
<td>Unspecified
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Keywords</th>
<td>Gtk
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>WebKit Gtk
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>mario@webkit.org
</td>
</tr>
<tr>
<th>CC</th>
<td>bugs-noreply@webkitgtk.org, cgarcia@igalia.com, cosimoc@gnome.org, mrobinson@webkit.org, yoon@igalia.com, zan@falconsigh.net
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=263584" name="attach_263584" title="Reduced test case">attachment 263584</a> <a href="attachment.cgi?id=263584&action=edit" title="Reduced test case">[details]</a></span>
Reduced test case
DESCRIPTION
In latest WebKit from trunk (tested with r191308), and probably for a while ago already (I think it happens with 2.8.3 as well), there seems to be a problem in WebKit2GTK when AC is enabled AND we have 3 animations where 2 of them happen SIMULTANEOUSLY and a 3rd one starts EXACTLY when the other 2 animations finish:
The WEBVIEW seems to FLICKER for a split second when the third animation starts, showing it COMPLETELY RENDERED with the same background colour defined via CSS for a DIV element. At the beginning I though it was just a "random flash", but after some testing and debugging I found that what is happening is that the webview gets filled with whatever the colour for that DIV element is, which is very weird.
You can see the BUG IN ACTION here:
<a href="https://drive.google.com/open?id=0BzYgG6C2skRsU3dlSnNUVVBXRU0">https://drive.google.com/open?id=0BzYgG6C2skRsU3dlSnNUVVBXRU0</a>
Perhaps this is related to <a class="bz_bug_link
bz_status_NEW "
title="NEW - [GTK] Artifacts on animation with images, round borders, overflow:hidden and AC enabled"
href="show_bug.cgi?id=150344">bug 150344</a> (as I found it in exactly the same use case), but it's hard to tell for now.
What I can tell is a few THINGS I found to MAKE THE GLITCH HAPPEN (relative to the test case I'm attaching):
* An IMAGE loaded with <IMG> over which we define an animation, and that IMG inside a DIV over which we defined another animation, and make both of them concurrent (same initial delay, same duration)
* The 2 concurrent animations start with a non-zero delay (even it it's just 0.01)
* The container DIV defines overflow: hidden
* The animation for the container DIV defines animation-fill-mode = forwards
* The two visible DIVs use ABSOLUTE (or fixed) positioning
* The first visible DIV (the one defining the colour) is drawn right on top of of some text (positioning it so that it does not cover any text does not cause the glitch either)
Last, this does not happen every time I run the attached test case, but perhaps 7/10 times. Also, in a real life scenario it can be much worse since you can see many flickerings at the same time if there are concurrent animations happening (as it is in my case).
Also, 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.
STEPS TO REPRODUCE
1. Uncompress the contents of the attached file and load index.html in MiniBrowser
2. You should see a round red image and some text explaining the issue with some text striked out at the top, covered by a div with a green coloured background on top of it.
3. After 0.85s, you should see the round image shrinking which is, in fact, 2 concurrent animations at the same time:
* One animation that makes the continer <DIV> shrink overflow:hidden shring
* One animation that makes the <IMG> element shrink
4. Right when those 2 animations finish, at 0.85s, a third animation (not visible really, but it's there) starts, lasting for 0.85s more.
EXPECTED OUTCOME:
No glitch should be seen when the last animation starts (step 4)
ACTUAL OUTCOME:
Very often, the web view flickers for a split second totally filled with the same colour of the background for the first DIV in the test case, causing a weird effect.
This does not always happen, though, so you might need to press Ctrl+R a few times.
FREQUENCY:
7/10</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>