In #6320 we resolved that we should clamp perspective values to 1px at least for interpolation. That causes some interesting behavior though.
Consider this testcase:
<!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 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
In #6320 we resolved that we should clamp perspective values to
1pxat least for interpolation. That causes some interesting behavior though.Consider this testcase:
In Chrome, and in old versions of Firefox (and Firefox after this bug is resolved), that causes a smooth animation because
transform: noneuses 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 #6320perspective(0)isperspective(1px), and that's a fairly drastic behavior change. In fact, there's no way an author can get an identity transform intoperspective()other than by not specifyingtransformat all, which seems unfortunate / wrong.cc @dbaron @mattwoodrow