Bug 163536 - Composited layer content rendered with delay when it enter viewport
Summary: Composited layer content rendered with delay when it enter viewport
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari Technology Preview
Hardware: Mac macOS 10.12
: P2 Normal
Assignee: Nobody
URL: http://fumbling-boy.surge.sh
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2016-10-17 01:05 PDT by Tobias Reich
Modified: 2016-10-18 11:54 PDT (History)
4 users (show)

See Also:

Attachments
Videos (2.68 MB, application/zip)
2016-10-17 01:05 PDT, Tobias Reich 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Tobias Reich 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
Comment 1 Radar WebKit Bug Importer 2016-10-18 11:54:28 PDT 
<rdar://problem/28828455>