<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 - Composited layer content rendered with delay when it enter viewport"
href="https://bugs.webkit.org/show_bug.cgi?id=163536">163536</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Composited layer content rendered with delay when it enter viewport
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari Technology Preview
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Macintosh
</td>
</tr>
<tr>
<th>OS</th>
<td>macOS 10.12
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Animations
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>tobias.reich.ich@gmail.com
</td>
</tr>
<tr>
<th>CC</th>
<td>dino@apple.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=291796" name="attach_291796" title="Videos">attachment 291796</a> <a href="attachment.cgi?id=291796&action=edit" title="Videos">[details]</a></span>
Videos
I'm using (maybe) one of the only performant techniques to create an animated background gradient. An element which fills the whole hero of my site has a width of 200% and gets animated using keyframes. The transform: translateX in the keyframe sequence leads to the creation of a composited layer. This works as intended, but sometimes–especially when I resize the browser width multiple times–the browser renders the hidden part of the gradient with a delay, which leads to ugly artifacts. I attached a video visualizing the issue. Artifacts show up on the right and left side of the hero. Sometimes less, sometimes more and sometimes everything is fine.
This bug appears in the Safari Technology Preview (Release 15 (Safari 10.1, WebKit 12603.1.8)) and Safari 10 (Version 10.0 (12602.1.50.0.10)). I'm not able to produce the same issue in Chrome or Firefox.
Here's the current version of the site: <a href="http://fumbling-boy.surge.sh">http://fumbling-boy.surge.sh</a></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>