181709 2018-01-16 17:02:24 -0800 Rendering errors when using CSS transforms (flickering and missing content) 2026-01-12 09:02:19 -0800 1 1 1 Unclassified WebKit Layout and Rendering Other All All NEW InRadar P2 Normal --- 1 steffen webkit-unassigned bfulgham graouts simon.fraser webkit-bug-importer wouter zalan oldest_to_newest 1389796 0 steffen 2018-01-16 17:02:24 -0800 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 1389797 1 simon.fraser 2018-01-16 17:07:09 -0800 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. 1389798 2 webkit-bug-importer 2018-01-16 17:11:31 -0800 <rdar://problem/36564618> 1389799 3 simon.fraser 2018-01-16 17:15:45 -0800 The flash happens when the animation wraps around from -50% to 0. 1389801 4 webkit-bug-importer 2018-01-16 17:15:59 -0800 <rdar://problem/36564775> 1389805 5 simon.fraser 2018-01-16 17:34:45 -0800 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. 1389809 6 simon.fraser 2018-01-16 17:39:06 -0800 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. 1389973 7 steffen 2018-01-17 04:57:10 -0800 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. 1390051 8 steffen 2018-01-17 09:48:11 -0800 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) 1390108 9 simon.fraser 2018-01-17 11:14:21 -0800 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.