Bug 181709

Summary: Rendering errors when using CSS transforms (flickering and missing content)
Product: WebKit Reporter: Steffen Deusch <steffen>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: bfulgham, graouts, simon.fraser, webkit-bug-importer, wouter, zalan
Priority: P2 Keywords: InRadar
Version: Other   
Hardware: All   
OS: All   

Description Steffen Deusch 2018-01-16 17:02:24 PST
Hello everyone,
this is my first bug report for WebKit, so it's maybe not perfect yet and I'm sorry about that.

I'm posting this based on my issue in the WPEWebKit repo on GitHub: https://github.com/WebPlatformForEmbedded/WPEWebKit/issues/434
As you can read there, I've noticed some strange rendering errors when using CSS transforms to create scrolling effects.
In WPE the content just disappears after scrolling for a while. When there is a repaint (I guess), e.g. because some other element on the page changes, it appears again.
The hardware used for testing this was a Raspberry Pi 3 and a video is available here: https://s3.eu-central-1.amazonaws.com/steffend/public/wpe-test-rpi3/rss-scroller/vid.mp4

First I thought that this is a bug with WPE only, but then I noticed that another example of a scrolling table has a similar issue: https://github.com/WebPlatformForEmbedded/WPEWebKit/issues/434#issuecomment-358153090
While I've got the same "content-disappearing" problem in in WPE, I also noticed flickering issues on Safari 11.0.2, Safari Tech Preview 47, WebKit Nightly and Mobile Safari, as you can see in the attached videos on GitHub.
I'm not quite sure if the flickering issue is connected to the disappearing problem, but sometimes I see some form of the latter one on iOS too, although I couldn't reliably reproduce it.

In Chrome/Chromium these examples all work as expected and as I'm using these techniques in production I'm currently forced to use Chromium based clients instead of e.g. WPE as this is quite a critical issue in my opinion.

Versions:
- all WPE versions I tested, master and stable branches, buildroot and yocto builds
- flickering in all WebKit-based browsers I tested (iOS, macOS)

Thanks for any help,
Steffen Deusch
Comment 1 Simon Fraser (smfr) 2018-01-16 17:07:09 PST
I can reproduce the issue with https://s3.eu-central-1.amazonaws.com/steffend/public/webkitbug/scrolling.html on macOS. I'll take a look.
Comment 2 Radar WebKit Bug Importer 2018-01-16 17:11:31 PST
<rdar://problem/36564618>
Comment 3 Simon Fraser (smfr) 2018-01-16 17:15:45 PST
The flash happens when the animation wraps around from -50% to 0.
Comment 4 Radar WebKit Bug Importer 2018-01-16 17:15:59 PST
<rdar://problem/36564775>
Comment 5 Simon Fraser (smfr) 2018-01-16 17:34:45 PST
This happens because (on macOS/iOS at least), the tiles are being moved around by CoreAnimation in another thread/process; the web content process is continually evaluating tile coverage, but doesn't do a  good job when the animation loops around and the position has large discontiguous jumps.
Comment 6 Simon Fraser (smfr) 2018-01-16 17:39:06 PST
We need to be able to ask an animation "where will you be in 16ms from now", including looping etc, to get good predictive tile coverage.
Comment 7 Steffen Deusch 2018-01-17 04:57:10 PST
Okay, this is odd: I just noticed another rendering error using exactly the same example page:
https://s3.eu-central-1.amazonaws.com/steffend/public/webkitbug/somethingswrong.mp4

This is especially strange because this only occurred once while testing yesterday, but I couldn't reproduce it. Now, I face it on every page load without changing anything at all.

Also it seems like the animation speed is somehow random:
https://s3.eu-central-1.amazonaws.com/steffend/public/webkitbug/speed.mp4

Mobile Safari, iOS 11.2.2.
Should I open another bug for this issue? Also it looks like the WPE bug I am experiencing isn't connected to CoreAnimation, so that would be another issue too.
Comment 8 Steffen Deusch 2018-01-17 09:48:11 PST
WPE is affected be the "animation-too-slow" bug too (https://bugs.webkit.org/show_bug.cgi?id=181709#c7). I just experienced it using https://s3.eu-central-1.amazonaws.com/steffend/public/webkitbug/scrollframe.html

(I also noticed overall bad performance of WPE in iframes. Does anybody know why this is the case? https://github.com/WebPlatformForEmbedded/WPEWebKit/issues/433)
Comment 9 Simon Fraser (smfr) 2018-01-17 11:14:21 PST
Please open new bug on the speed issue (we've probably not got the final height when we compute the 50% for the animation).

Also open new bugs for issues that are specific to WPE.