198529 2019-06-04 08:01:52 -0700 css 'inherit' fails when parent property is running an accelerated animation 2022-03-04 13:46:37 -0800 1 1 1 Unclassified WebKit Animations Safari 12 Unspecified Unspecified NEW InRadar P2 Normal --- 1 smcgruer webkit-unassigned dino graouts simon.fraser webkit-bug-importer oldest_to_newest 1541567 0 371281 smcgruer 2019-06-04 08:01:52 -0700 Created attachment 371281 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. 1542470 1 webkit-bug-importer 2019-06-06 10:22:05 -0700 <rdar://problem/51488653> 1848394 2 graouts 2022-03-04 13:46:37 -0800 All of Chrome, Firefox and Safari seem to struggle with this example. 371281 2019-06-04 08:01:52 -0700 2019-06-04 08:01:52 -0700 reproduction index.html text/html 448 smcgruer PHN0eWxlPgpkaXYgewogICAgdHJhbnNmb3JtLW9yaWdpbjogMTAwcHggMTAwcHg7Cn0KI3BhcmVu dCB7CiAgICBhbmltYXRpb246IGFuaW0gMXMgaW5maW5pdGU7CiAgICB0cmFuc2Zvcm06IHJvdGF0 ZSg0NWRlZyk7Cn0KI2NoaWxkIHsKICAgIHRyYW5zZm9ybTogaW5oZXJpdDsKICAgIHBvc2l0aW9u OiByZWxhdGl2ZTsKICAgIHRvcDogNTBweDsKfQpALXdlYmtpdC1rZXlmcmFtZXMgYW5pbSB7CiAg ICAwJSB7CiAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7CiAgICB9CiAgICAxMDAlIHsK ICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSg0NWRlZyk7CiAgICB9Cn0KPC9zdHlsZT4KCjxkaXYg aWQ9InBhcmVudCI+CiAgICBQYXJlbnQuCiAgICA8ZGl2IGlkPSJjaGlsZCI+Q2hpbGQgc2hvdWxk IGluaGVyaXQgcGFyZW50IHRyYW5zZm9ybSBhbmltYXRpb248L2Rpdj4KPC9kaXY+Cg==