Bug 164970

Summary: REGRESSION: Applying CSS transforms to elements visually above a <canvas> causes flashing
Product: WebKit Reporter: Devin Rousso <hi>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: dino, hi, joepeck, sabouhallawa, simon.fraser, thomas.bartelmess, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
[Animated GIF] Video of Issue none

Devin Rousso
Reported 2016-11-18 16:53:57 PST
I just noticed this on my website <http://devinrousso.com>. If you mouse over one of the header links ("About", "Projects", "Resume", "Contact"), everything else with a CSS transform will suddenly flash (noticeably). This appears to be caused by the JS animation that I am running with <canvas> which is "underneath" this content (you can see the code for this at <http://devinrousso.com/code/ui/js/common.js#312>).
Attachments
[Animated GIF] Video of Issue (4.57 MB, image/gif)
2016-11-18 16:55 PST, Devin Rousso 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Devin Rousso
Comment 1 2016-11-18 16:55:05 PST
Created attachment 295224 [details] [Animated GIF] Video of Issue
Simon Fraser (smfr)
Comment 2 2016-11-18 16:59:15 PST
There's some z-order flipping happening, related to the animations. Not sure why.
Radar WebKit Bug Importer
Comment 3 2016-12-01 12:42:47 PST
<rdar://problem/29464754>
Note You need to log in before you can comment on or make changes to this bug.