[Webkit-unassigned] [Bug 163536] New: Composited layer content rendered with delay when it enter viewport

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=163536

            Bug ID: 163536
           Summary: Composited layer content rendered with delay when it
                    enter viewport
    Classification: Unclassified
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Macintosh
                OS: macOS 10.12
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Animations
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: tobias.reich.ich at gmail.com
                CC: dino at apple.com

Created attachment 291796
  --> https://bugs.webkit.org/attachment.cgi?id=291796&action=review
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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.webkit.org/pipermail/webkit-unassigned/attachments/20161017/52ceca34/attachment.html>