[csswg-drafts] After #6320 there's no way to get an identity transform for interpolation of perspective (#6488)

emilio has just created a new issue for https://github.com/w3c/csswg-drafts:

== After #6320 there's no way to get an identity transform for interpolation of perspective ==
In https://github.com/w3c/csswg-drafts/issues/6320 we resolved that we should clamp perspective values to `1px` at least for interpolation. That causes some interesting behavior though.

Consider [this testcase](http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=9531):

```html
<!DOCTYPE html>
<style>
body {
  margin: 20px
}

.animation {
  background-color: rgb(255, 255, 255);
  border-radius: 0.5625rem;
  box-shadow: rgb(238, 241, 240) 0px 0px 2px 2px;
  overflow: hidden;
  transition: transform 0.25s ease-in-out 0s, box-shadow 0.25s ease-in-out 0s;
  padding: 10px;
}

.animation:hover {
  transform:perspective(500px) translateZ(1rem);
  transform-style:preserve-3d;
  box-shadow:0 0 5px 5px #a7e5d6;
}
</style>
<div class="animation">
  Test Animation
</div>
```

In Chrome, and in old versions of Firefox (and Firefox after [this bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1717161) is resolved), that causes a smooth animation because `transform: none` uses the identity transform.

In release versions of chrome and older versions of Firefox, `.animation { transform: perspective(0) translateZ(0) }` was a no-op in the above test-case, but after #6320 `perspective(0)` is `perspective(1px)`, and that's a fairly drastic behavior change. In fact, there's no way an author can get an identity transform into `perspective()` other than by not specifying `transform` at all, which seems unfortunate / wrong.

cc @dbaron @mattwoodrow 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6488 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 2 August 2021 09:31:28 UTC