NEW 163536
Composited layer content rendered with delay when it enter viewport 
https://bugs.webkit.org/show_bug.cgi?id=163536
Summary Composited layer content rendered with delay when it enter viewport
Tobias Reich
Reported 2016-10-17 01:05:55 PDT
Created attachment 291796 [details] 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: http://fumbling-boy.surge.sh
Attachments
Videos (2.68 MB, application/zip)
2016-10-17 01:05 PDT, Tobias Reich 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2016-10-18 11:54:28 PDT
<rdar://problem/28828455>
Note You need to log in before you can comment on or make changes to this bug.