216107 2020-09-02 16:10:35 -0700 Negative values in cubic-bezier transform transitions do not work 2020-09-03 02:18:36 -0700 1 1 1 Unclassified WebKit Animations Safari Technology Preview All All RESOLVED DUPLICATE 215826 InRadar P2 Normal --- 1 j webkit-unassigned dino graouts graouts webkit-bug-importer oldest_to_newest 1685049 0 407829 j 2020-09-02 16:10:35 -0700 Created attachment 407829 Save as HTML and open in latest Webkit! "Animate: transform" is broken behavior; "Animate: top" is expected behavior. When a CSS cubic-bezier easing function contains a negative value, and the transition property is `transform`, the property doesn't animate while in the negative range. It starts animating when the easing function enters the positive range. **See attachment** for bug reduction with `transform` and expected behavior with `top`. The expected behavior with `transform` is observed in iOS 13, Chrome, and Firefox. This bug was introduced between Safari 13 and 14. We have been using this animation feature at https://libbyapp.com for several years, and noticed it broke in Saf 14 betas. 1685092 1 webkit-bug-importer 2020-09-02 18:17:04 -0700 <rdar://problem/68245777> 1685220 2 graouts 2020-09-03 02:18:36 -0700 Thanks for filing this! This is a duplicate of bug 215826 which was fixed in r266280 last week. *** This bug has been marked as a duplicate of bug 215826 *** 407829 2020-09-02 16:10:35 -0700 2020-09-03 02:13:33 -0700 Save as HTML and open in latest Webkit! "Animate: transform" is broken behavior; "Animate: top" is expected behavior. file_216107.txt text/html 1772 j PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCiAgPGhlYWQ+DQogICAgPG1ldGEgY2hhcnNldD0idXRm LTgiIC8+DQogICAgPHRpdGxlPk5lZyBDdWIgQmV6IFRyYW5zbGF0aW9uczwvdGl0bGU+DQogICAg PHN0eWxlPg0KICAgICAgYm9keSB7DQogICAgICAgIHdpZHRoOiAzMDBweDsNCiAgICAgICAgbWFy Z2luOiBhdXRvOw0KICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7DQogICAgICB9DQoNCiAgICAg IGJ1dHRvbiB7DQogICAgICAgIGRpc3BsYXk6IGJsb2NrOw0KICAgICAgICB3aWR0aDogMTAwJTsN CiAgICAgICAgcGFkZGluZzogMWVtOw0KICAgICAgICBtYXJnaW46IDFlbSAwOw0KICAgICAgfQ0K DQogICAgICBsYWJlbCB7DQogICAgICAgIGRpc3BsYXk6IGJsb2NrOw0KICAgICAgICBtYXJnaW46 IDFlbSAwOw0KICAgICAgfQ0KDQogICAgICAuYm91cXVldCB7DQogICAgICAgIHBvc2l0aW9uOiBh YnNvbHV0ZTsNCiAgICAgICAgdG9wOiAwcHg7DQogICAgICAgIHdpZHRoOiAxMDAlOw0KICAgICAg ICBtYXJnaW4tdG9wOiAzMDBweDsNCiAgICAgICAgdGV4dC1hbGlnbjogY2VudGVyOw0KICAgICAg ICBmb250LXNpemU6IDNlbTsNCiAgICAgIH0NCg0KICAgICAgLmJvdXF1ZXQuZmx5LXRyYW5zZm9y bSB7DQogICAgICAgIHRyYW5zaXRpb246IHRyYW5zZm9ybSAyMDAwbXMgY3ViaWMtYmV6aWVyKDAu NSwgLTEuMTUsIDAuOCwgMC43KTsNCiAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDYwMHB4 KTsNCiAgICAgIH0NCg0KICAgICAgLmJvdXF1ZXQuZmx5LXRvcCB7DQogICAgICAgIHRyYW5zaXRp b246IHRvcCAyMDAwbXMgY3ViaWMtYmV6aWVyKDAuNSwgLTEuMTUsIDAuOCwgMC43KTsNCiAgICAg ICAgdG9wOiA2MDBweDsNCiAgICAgIH0NCiAgICA8L3N0eWxlPg0KICAgIDxzY3JpcHQ+DQogICAg ICBmdW5jdGlvbiBvbkJ1dHRvbkNsaWNrKCkgew0KICAgICAgICBkb2N1bWVudC5xdWVyeVNlbGVj dG9yKCcuYm91cXVldCcpLmNsYXNzTGlzdC5yZW1vdmUoJ2ZseS10cmFuc2Zvcm0nKTsNCiAgICAg ICAgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignLmJvdXF1ZXQnKS5jbGFzc0xpc3QucmVtb3ZlKCdm bHktdG9wJyk7DQogICAgICAgIHNldFRpbWVvdXQoZmx5Qm91cXVldCwgMTAwKTsNCiAgICAgIH0N Cg0KICAgICAgZnVuY3Rpb24gZmx5Qm91cXVldCgpIHsNCiAgICAgICAgdmFyIHJhZGlvID0gZG9j dW1lbnQucXVlcnlTZWxlY3RvcignaW5wdXRbbmFtZT0iYW5pbS1wcm9wZXJ0eSJdOmNoZWNrZWQn KTsNCiAgICAgICAgdmFyIGZseUNsYXNzID0gJ2ZseS0nK3JhZGlvLnZhbHVlOw0KICAgICAgICBk b2N1bWVudC5xdWVyeVNlbGVjdG9yKCcuYm91cXVldCcpLmNsYXNzTGlzdC5hZGQoZmx5Q2xhc3Mp Ow0KICAgICAgfQ0KICAgIDwvc2NyaXB0Pg0KICA8L2hlYWQ+DQogIDxib2R5Pg0KICAgIDxidXR0 b24gb25jbGljaz0ib25CdXR0b25DbGljaygpIj5GbHkhPC9idXR0b24+DQoNCiAgICA8bGFiZWw+ DQogICAgICA8aW5wdXQgdHlwZT0icmFkaW8iIG5hbWU9ImFuaW0tcHJvcGVydHkiIHZhbHVlPSJ0 cmFuc2Zvcm0iIGNoZWNrZWQgLz4NCiAgICAgIEFuaW1hdGU6IHRyYW5zZm9ybQ0KICAgIDwvbGFi ZWw+DQoNCiAgICA8bGFiZWw+DQogICAgICA8aW5wdXQgdHlwZT0icmFkaW8iIG5hbWU9ImFuaW0t cHJvcGVydHkiIHZhbHVlPSJ0b3AiIC8+DQogICAgICBBbmltYXRlOiB0b3ANCiAgICA8L2xhYmVs Pg0KDQogICAgPGRpdiBjbGFzcz0iYm91cXVldCI+8J+SkDwvZGl2Pg0KICA8L2JvZHk+DQo8L2h0 bWw+DQo=