Bug 198529 - css 'inherit' fails when parent property is running an accelerated animation
Summary: css 'inherit' fails when parent property is running an accelerated animation
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari 12
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2019-06-04 08:01 PDT by Stephen McGruer
Modified: 2022-03-04 13:46 PST (History)
4 users (show)

See Also:

Attachments
reproduction (448 bytes, text/html)
2019-06-04 08:01 PDT, Stephen McGruer 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Stephen McGruer 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.
Comment 1 Radar WebKit Bug Importer 2019-06-06 10:22:05 PDT 
<rdar://problem/51488653>
Comment 2 Antoine Quint 2022-03-04 13:46:37 PST 
All of Chrome, Firefox and Safari seem to struggle with this example.