Bug 198529

Summary: css 'inherit' fails when parent property is running an accelerated animation
Product: WebKit Reporter: Stephen McGruer <smcgruer>
Component: AnimationsAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: dino, graouts, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 12   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
reproduction none

Stephen McGruer
Reported 2019-06-04 08:01:52 PDT
Created attachment 371281 [details] reproduction Steps to reproduce: See https://output.jsbin.com/nidagep/ for the reproduction (also attached), and the original Chrome bug https://cbrug.com/265303 The gist is that when a parent element is running an accelerated animation, a child that uses a value of 'inherit' is not properly updated unless something causes a main frame tick (e.g. a mouseover or a rAF). In the attached example, the child should transform smoothly from 0-90deg, due to the accumulation from the parent + the inherit. Instead, it transforms from 0-45deg unless a main frame tick happens. This was reproduced in Safari using Browserstack; Safari 12 on Mac Mojave.
Attachments
reproduction (448 bytes, text/html)
2019-06-04 08:01 PDT, Stephen McGruer 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2019-06-06 10:22:05 PDT
<rdar://problem/51488653>
Antoine Quint
Comment 2 2022-03-04 13:46:37 PST
All of Chrome, Firefox and Safari seem to struggle with this example.
Note You need to log in before you can comment on or make changes to this bug.