276121 2024-07-02 04:14:49 -0700 When animating perspective-origin where one of the values is a custom property (var()), the animation is not applied 2026-04-06 14:23:17 -0700 1 1 1 Unclassified WebKit CSS Safari 17 All Unspecified RESOLVED FIXED https://github.com/web-platform-tests/wpt/pull/59008 BrowserCompat, InRadar P2 Normal --- 1 tombigel ahmad.saleem792 graouts karlcow koivisto maggotfish webkit-bug-importer oldest_to_newest 2044170 0 tombigel 2024-07-02 04:14:49 -0700 When applying a `perspective-origin` to an element, where at least one of its components is a CSS custom property, and animating the composed value with the custom property in the keyframes the animations does not apply. This happens where all keyframes are custom properties, and with mixed. Found one exception where the start is custom and the end is not or vice versa, but it might have some logical explanation. This fails: ``` @keyframes perspective-var { from { perspective-origin: 50% var(--perspective-y-start); } to { perspective-origin: 50% var(--perspective-y-end); } } ``` This also fails: ``` @keyframes perspective-mixed { 0% { perspective-origin: 50% var(--perspective-y-start); } 50% { perspective-origin: 50% 50%; } 100% { perspective-origin: 50% var(--perspective-y-end); } } ``` But This works: ``` @keyframes perspective-mixed { from { perspective-origin: 50% 0; } to { perspective-origin: 50% var(--perspective-y-end); } } ``` Fails on Safari Desktop and iOS Works on Chrome and Firefox On Firefox animating perspective-origin does not work as expected without will-change: transform, with it it works like in Chrome. 2044172 1 471788 tombigel 2024-07-02 04:18:13 -0700 Created attachment 471788 Demo showing the bug 2044206 2 maggotfish 2024-07-02 09:00:02 -0700 It seems that the custom property doesn't get resolved correctly inside the @keyframes rule and the values keeps the initial 50% value. If we change the x values inline the animation still plays on the x axis, but the y axis is still failing in the same way - every custom property stays as initial. 2044643 3 graouts 2024-07-04 00:36:36 -0700 The `perspective-origin` is implemented as a shorthand for the `perspective-origin-x` and `perspective-origin-y` properties. While this is not standard, this is how things stand now. Interestingly, this does not happen when the longhand `perspective-origin-y` is animated. This could be a problem with shorthands in general, or specifically with this one. 2044678 4 graouts 2024-07-04 07:12:11 -0700 This is purely a CSS issue, not related to animations per se. This is due to this code in `consumePositionCoordinates()`: auto value2 = consumePositionComponent(range, parserMode, unitless, negativePercentagePolicy); if (!value2) return positionFromOneValue(*value1); So if we fail to parse a second value for `perspective-origin`, we treat the value as a single value property instead of determining we failed to parse that second value because it's a variable. If we returned `nullptr` here instead, the caller `CSSPropertyParser::consumePerspectiveOrigin()` would return `false` which would propagate that return value up to `CSSPropertyParser::parseValueStart()` which would do the right thing per this comment: // Variable references will fail to parse here and will fall out to the variable ref parser below. I'll note that `consumePositionCoordinates()` has this FIXME, although I'm not sure whether it is relevant: // FIXME: This may consume from the range upon failure. The background // shorthand works around it, but we should just fix it here. 2044679 5 graouts 2024-07-04 07:13:14 -0700 Putting the `var()` as the first value processes things correctly since `consumePositionCoordinates()` return `nullptr` in that case, evidence that if we returned `nullptr` when the second value failed to parse we'd have the expected behavior. 2044680 6 471814 graouts 2024-07-04 07:17:42 -0700 Created attachment 471814 Reduction 2045023 7 webkit-bug-importer 2024-07-07 23:43:28 -0700 <rdar://problem/131288246> 2197086 8 ahmad.saleem792 2026-04-05 13:03:21 -0700 Pull request: https://github.com/WebKit/WebKit/pull/62084 2197276 9 ews-feeder 2026-04-06 10:43:34 -0700 Committed 310650@main (cb1338276a4d): <https://commits.webkit.org/310650@main> Reviewed commits have been landed. Closing PR #62084 and removing active labels. 2197385 10 ahmad.saleem792 2026-04-06 14:23:17 -0700 Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/59008 471788 2024-07-02 04:18:13 -0700 2024-07-02 04:18:13 -0700 Demo showing the bug index.html text/html 2684 tombigel PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIiA+CjxoZWFkPgogIDxtZXRhIGNoYXJzZXQ9 IlVURi04Ij4KICA8dGl0bGU+U2FmYXJpIGJ1ZyB3aXRoIHBlcnNwZWN0aXZlIG9yaWdpbiBhbmlt YXRpb24gYW5kIGNzcyBjdXN0b20gcHJvcGVydGllczwvdGl0bGU+CiA8c3R5bGUgdHlwZT0idGV4 dC9jc3MiPgogICBib2R5IHsKICBtYXJnaW46IDJlbTsKICBmb250LWZhbWlseTogc2Fucy1zZXJp ZjsKfQoKLndyYXBwZXIgewogIHdpbGwtY2hhbmdlOiB0cmFuc2Zvcm07CiAgcGVyc3BlY3RpdmU6 IDgwMHB4OwogIC0tcGVyc3BlY3RpdmUteS1zdGFydDogMCU7CiAgLS1wZXJzcGVjdGl2ZS15LWVu ZDogMTAwJTsKICBkaXNwbGF5OiBmbGV4OwogIGdhcDogM2VtOwp9Ci53cmFwcGVyIGRpdiB7CiAg d2lkdGg6IDIwMHB4OwogIGhlaWdodDogMjAwcHg7Cn0KLndyYXBwZXIuYSB7CiAgcGVyc3BlY3Rp dmUtb3JpZ2luOiA1MCUgdmFyKC0tcGVyc3BlY3RpdmUteS1zdGFydCk7CiAgYW5pbWF0aW9uOiBw ZXJzcGVjdGl2ZS12YXIgMnMgaW5maW5pdGUgYWx0ZXJuYXRlOwp9Ci53cmFwcGVyLmEgZGl2IHsK ICBiYWNrZ3JvdW5kOiByZWQ7CiAgdHJhbnNmb3JtOiByb3RhdGV5KDQ1ZGVnKTsKfQoud3JhcHBl ci5iIHsKICBwZXJzcGVjdGl2ZS1vcmlnaW46IDUwJSAwOwogIGFuaW1hdGlvbjogcGVyc3BlY3Rp dmUtbWl4ZWQgMnMgaW5maW5pdGUgYWx0ZXJuYXRlOwp9Ci53cmFwcGVyLmIgZGl2IHsKICBiYWNr Z3JvdW5kOiBncmVlbjsKICB0cmFuc2Zvcm06IHJvdGF0ZXkoNDVkZWcpOwp9Ci53cmFwcGVyLmMg ewogIHBlcnNwZWN0aXZlLW9yaWdpbjogNTAlIDA7CiAgYW5pbWF0aW9uOiBwZXJzcGVjdGl2ZSAy cyBpbmZpbml0ZSBhbHRlcm5hdGU7Cn0KLndyYXBwZXIuYyBkaXYgewogIGJhY2tncm91bmQ6IGJs dWU7CiAgdHJhbnNmb3JtOiByb3RhdGV5KDQ1ZGVnKTsKfQoud3JhcHBlciBjb2RlIHsKICB3aGl0 ZS1zcGFjZTogcHJlOwp9CgpAa2V5ZnJhbWVzIHBlcnNwZWN0aXZlIHsKICBmcm9tIHsKICAgIHBl cnNwZWN0aXZlLW9yaWdpbjogNTAlIDA7CiAgfQogIHRvIHsKICAgIHBlcnNwZWN0aXZlLW9yaWdp bjogNTAlIDEwMCU7CiAgfQp9CkBrZXlmcmFtZXMgcGVyc3BlY3RpdmUtbWl4ZWQgewogIGZyb20g ewogICAgcGVyc3BlY3RpdmUtb3JpZ2luOiA1MCUgMDsKICB9CiAgdG8gewogICAgcGVyc3BlY3Rp dmUtb3JpZ2luOiA1MCUgdmFyKC0tcGVyc3BlY3RpdmUteS1lbmQpOwogIH0KfQpAa2V5ZnJhbWVz IHBlcnNwZWN0aXZlLXZhciB7CiAgZnJvbSB7CiAgICBwZXJzcGVjdGl2ZS1vcmlnaW46IDUwJSB2 YXIoLS1wZXJzcGVjdGl2ZS15LXN0YXJ0KTsKICB9CiAgdG8gewogICAgcGVyc3BlY3RpdmUtb3Jp Z2luOiA1MCUgdmFyKC0tcGVyc3BlY3RpdmUteS1lbmQpOwogIH0KfQogPC9zdHlsZT4KCjwvaGVh ZD4KPGJvZHk+CjxoMT5TYWZhcmkgYnVnIHdpdGggcGVyc3BlY3RpdmUgb3JpZ2luIGFuaW1hdGlv biBhbmQgY3NzIGN1c3RvbSBwcm9wZXJ0aWVzIDwvaDE+CjxoMj5XaGVuIGFuaW1hdGluZyA8Y29k ZT5wZXJzcGVjdGl2ZS1vcmlnaW48L2NvZGU+IHdoZXJlIG9uZSBvZiB0aGUgdmFsdWVzIGlzIGEg Y3VzdG9tIHByb3BlcnR5ICh2YXIoKSksIHRoZSBhbmltYXRpb24gaXMgbm90IGFwcGxpZWQgaW4g V2Via2l0IDxoMj4KICA8aDM+Tm90ZXM8L2gzPgogIDxvbD4KICAgIDxsaT5XZSBhcmUgbm90IGFu aW1hdGluZyB0aGUgcHJvcGVydHksIHdlIGFyZSBhbmltYXRpbmcgdGhlIHBlcnNwZWN0aXZlIHdo ZW4gYSB2YWx1ZSBpcyBhIHByb3BlcnR5PC9saT4KICAgIDxsaT5GaXJlZm94IGFwcGFyZW50bHkg ZG9lcyBub3QgYW5pbWF0ZSA8Y29kZT50cmFuc2Zvcm0tb3JpZ2luPC9jb2RlPiB3aXRob3V0IGFk ZGluZyA8Y29kZT53aWxsLWNoYW5nZTp0cmFuc2Zvcm08L2NvZGU+IHNvIHdlIGFkZGVkIGl0IGZv ciBjb25zaXN0ZW5jeTwvbGk+CiAgPC9vbD4KCjxoMz4KICBWYXJzIC0gQnJva2VuIG9uIFdlYmtp dAo8L2gzPgo8ZGl2IGNsYXNzPSJhIHdyYXBwZXIiPgogIDxkaXY+PC9kaXY+CiAgPGNvZGU+QGtl eWZyYW1lcyBwZXJzcGVjdGl2ZS12YXIgewogIGZyb20gewogICAgcGVyc3BlY3RpdmUtb3JpZ2lu OiA1MCUgdmFyKC0tcGVyc3BlY3RpdmUteS1zdGFydCk7CiAgfQogIHRvIHsKICAgIHBlcnNwZWN0 aXZlLW9yaWdpbjogNTAlIHZhcigtLXBlcnNwZWN0aXZlLXktZW5kKTsKICB9Cn08L2NvZGU+Cjwv ZGl2PgogIDxoMz4KICBNaXhlZCAtIFdvcmtzCjwvaDM+CjxkaXYgY2xhc3M9ImIgd3JhcHBlciI+ CiAgPGRpdj48L2Rpdj4KICA8Y29kZT5Aa2V5ZnJhbWVzIHBlcnNwZWN0aXZlLW1peGVkIHsKICBm cm9tIHsKICAgIHBlcnNwZWN0aXZlLW9yaWdpbjogNTAlIDA7CiAgfQogIHRvIHsKICAgIHBlcnNw ZWN0aXZlLW9yaWdpbjogNTAlIHZhcigtLXBlcnNwZWN0aXZlLXktZW5kKTsKICB9Cn08L2NvZGU+ CjwvZGl2Pgo8aDM+CiAgTm8gdmFycyAtIFdvcmtzCjwvaDM+CjxkaXYgY2xhc3M9ImMgd3JhcHBl ciI+CiAgPGRpdj48L2Rpdj4gCiAgPGNvZGU+QGtleWZyYW1lcyBwZXJzcGVjdGl2ZSB7CiAgZnJv bSB7CiAgICBwZXJzcGVjdGl2ZS1vcmlnaW46IDUwJSAwOwogIH0KICB0byB7CiAgICBwZXJzcGVj dGl2ZS1vcmlnaW46IDUwJSAxMDAlOwogIH0KfTwvY29kZT4KPC9kaXY+CiAgCjwvYm9keT4KPC9o dG1sPgo= 471814 2024-07-04 07:17:42 -0700 2024-07-04 07:17:42 -0700 Reduction perspective-origin-variable-second-value.html text/html 439 graouts PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIiA+CjxoZWFkPgo8bWV0YSBjaGFyc2V0PSJV VEYtOCI+Cjx0aXRsZT5DU1MgVmFyaWFibGVzIGFuZCBwZXJzcGVjdGl2ZS1vcmlnaW48L3RpdGxl Pgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoKLmNvbnRhaW5lciB7CiAgcGVyc3BlY3RpdmU6IDgw MHB4OwogIC0tcGVyc3BlY3RpdmUteTogMCU7CiAgcGVyc3BlY3RpdmUtb3JpZ2luOiA1MCUgdmFy KC0tcGVyc3BlY3RpdmUteSk7Cn0KCi5jb250YWluZXIgPiBkaXYgewogIHdpZHRoOiAyMDBweDsK ICBoZWlnaHQ6IDIwMHB4OwogIGJhY2tncm91bmQ6IHJlZDsKICB0cmFuc2Zvcm06IHJvdGF0ZXko NDVkZWcpOwp9Cgo8L3N0eWxlPgoKPC9oZWFkPgo8Ym9keT4KPGRpdiBjbGFzcz0iY29udGFpbmVy Ij4KICA8ZGl2PjwvZGl2Pgo8L2Rpdj4KPC9ib2R5Pgo8L2h0bWw+Cg==