| Summary: | transform matrix which cannot be decomposed shouldn't be interpolated with other value | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Xidorn Quan <xidorn-webkit> | ||||
| Component: | Animations | Assignee: | Dean Jackson <dino> | ||||
| Status: | RESOLVED DUPLICATE | ||||||
| Severity: | Normal | CC: | ahmad.saleem792, dino, graouts, graouts, simon.fraser, webkit-bug-importer | ||||
| Priority: | P2 | Keywords: | BrowserCompat, InRadar | ||||
| Version: | WebKit Nightly Build | ||||||
| Hardware: | Unspecified | ||||||
| OS: | Unspecified | ||||||
| Attachments: |
|
||||||
I am able to reproduce this bug in Safari 16.1 and Safari Technology Preview 156 where the toggling back leads to animations while Chrome Canary 109 and Firefox Nightly 108 does not animate. I know there are fixes around transform matrix in Webkit ToT but since they are not in STP, I cannot verify whether those fixes would result in fixing this or not. Thanks! This persists on ToT as well. The relevant spec text here is at the end of https://w3c.github.io/csswg-drafts/css-transforms-1/#matrix-interpolation: "If one of the matrices for interpolation is non-invertible, the used animation function must fall-back to a discrete animation according to the rules of the respective animation specification." We seem to have the necessary logic to handle this in TransformOperations::shouldFallBackToDiscreteAnimation() and TransformOperations::blend(), but I wonder if we're running animations with acceleration here and thus not going through this code path. @Antoine - seems to be fixed on WebKit TOT (280466@main). It might be fixed by your patch - https://commits.webkit.org/280466@main Bug 275993. Marking this as "RESOLVED CONFIGURATION CHANGED". Indeed this progressed with 280466@main, so marking as dupe of 275993. *** This bug has been marked as a duplicate of bug 275993 *** |
Created attachment 364765 [details] testcase Steps to reproduce: 1. open the attached testcase 2. click the "toggle" button and observe 3. click it again Actual result: The rectangle animates when it shows and hides. Expected result: The rectangle should just show and hide without any animation. Explanation: Here I use `transform: matrix(0, 0, 0, 0, 0, 0)` to hide the rectangle. This is a matrix which cannot be decomposed. Based on the spec, this value should not be interpolated with other values. It works as expected on Firefox and Chrome.