[css-transforms] 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](https://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=1723266) 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 

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[css-transforms] After #6320 there's no way to get an identity transform for interpolation of perspective #6488

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[css-transforms] After #6320 there's no way to get an identity transform for interpolation of perspective #6488

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions