Repository navigation
[css-transforms] After #6320 there's no way to get an identity transform for interpolation of perspective #6488
Description
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.
Activity
[-]After #6320 there's no way to get an identity transform for interpolation of perspective[/-][+][css-transforms] After #6320 there's no way to get an identity transform for interpolation of perspective[/+]tabatkins commentedon Aug 3, 2021
The fact that
perspective(0)was treated as an identity transform was always a bizarre hack; it's a complete discontinuity in behavior, as this issue shows.The "identity" perspective is
perspective(infinity), right? We could just make that valid.mattwoodrow commentedon Aug 3, 2021
It looks like we already specify (in the Terminology list) that the identity transform function for perspective is
perspective(infinity), which seems correct.Adding
perspective(infinity)(or some equivalent token) as an option for explicitly specifying this case sounds like a good idea to me.Loirooriol commentedon Aug 4, 2021
I guess
perspective(calc(infinity * 1px))orperspective(calc(1px / 0))are already supposed to work, right?tabatkins commentedon Aug 4, 2021
Those absolutely work (per spec), yes, but technically they're not identity since they'll get clamped to the maximum allowed perspective.
css-meeting-bot commentedon Aug 5, 2021
The CSS Working Group just discussed
[css-transforms] After #6320 there's no way to get an identity transform for interpolation of perspective.The full IRC log of that discussion
<dael> Topic: [css-transforms] After #6320 there's no way to get an identity transform for interpolation of perspective<dael> github: https://github.com//issues/6488
<dael> TabAtkins: Previously we had odd behavior where perspective funt with 0 treated as no perspective. That was null transform.
<dael> TabAtkins: A little while back resolved that's weird and silly. perspective of 0 px is your eyes are on he screen and that's different. We clampped to a floor. You can't say 0 anymore
<dael> TabAtkins: No we have no way to say no perspective applied. That means infinite. Possibly this can be done with infinity keyword in calc. A bit awk and implies infinite link is stored internally or the max value triggers this
<dael> TabAtkins: We probably want an actual preserved value. Proposal is allow perspective to take keyword infinity directly
<dael> TabAtkins: That's the no transform, does 0 stuff
<dael> astearns: Reasonable to me. Any concerns?
<dael> smfr: Do we have that keyword?
<dael> florian: How is it different from none
<dael> TabAtkins: None is a null transform list. If you need to match 2 lists and want 2nd list to not do anything you cannot write that. You can't put none in the middle of a transform list
<dael> TabAtkins: I'm not sure what you mean smfr
<dael> smfr: animation iteration takes keyword infinite. Are there other places in CSS where this would be reasonable or is this special
<dael> TabAtkins: I think special case b/c any other place where....well...any place where infinity might be meaningful we should have a keyword indicating that behavior rather than fallback to calc constant b/c that is clamped to a numeric value
<dael> smfr: What happens when interpolate between infinity and 100
<dael> TabAtkins: Well defined. infinite is identiy matrix. It has to b/c before this perspective 0 was the infinite, it was just the wrong way to write it
<florian> q?
<dael> astearns: We're over time. I'm guessing we should punt to next week and resolve
<dael> smfr: Sounds fine
<dael> TabAtkins: Fine
tabatkins commentedon Aug 5, 2021
Simon's question in the call about using
infinite(fromanimation-iteration-count) vsinfinity(fromcalc()constants) is a good one. I... don't know quite what to do there.An alternative is to avoid the question with
perspective(none), perhaps?css-meeting-bot commentedon Aug 11, 2021
The CSS Working Group just discussed
identity transforms, and agreed to the following:RESOLVED: Add perspective(none)The full IRC log of that discussion
<fantasai> Topic: identity transforms<fantasai> github: https://github.com//issues/6488
<fantasai> emilio: I wasn't on last week's call
<fantasai> emilio: seems fine to add a new value to represent this
<fantasai> emilio: ...
<smfr> q+
<Rossen_> ack smfr
<fantasai> smfr: I'm ok with something like perspective(infinity)
<astearns> we ran out of time last week to get to a resolution
<fantasai> smfr: I do wonder about the lack of units, wonder if it adds complexity to animations and blending
<fantasai> TabAtkins: perspective is normalized to matrix, so shouldn't be a problem
<fantasai> TabAtkins: addition with infinity would swamp whatever value the other side was, so don't have to worry in that case either
<fantasai> Rossen_: sounds like we're going forward with infinity?
<fantasai> astearns: there was also the suggestion of perspective(none)
<fantasai> TabAtkins: smfr brought up that animation-iteration-count uses 'infinite' whereas calc() uses 'infinity', so 'none' would dodge the issue
<jfkthame> +1 to perspective(none)
<fantasai> Rossen_: is everyone ok with none?
<fantasai> RESOLVED: Add perspective(none)
mix5003 commentedon Aug 24, 2021
can i ask something?
from this document. it said identity transform is
perspective(infinity). but from this resolved it addperspective(none). is it meanperspective(infinity)is change toperspective(none)or it meanperspective(none)andperspective(infinity)both valid?emilio commentedon Aug 24, 2021
Just
perspective(none), afaict. That document needs to be updated.12 remaining items
Add support for perspective(none) transform function.
Add support for perspective(none) transform function.
Add support for perspective(none) transform function.
Updates to CSS perspective property and perspective() function. (mdn#…
Add support for perspective(none) transform function.
Add support for perspective(none) transform function.
Add support for perspective(none) transform function.
Add support for perspective(none) transform function.
Add support for perspective(none) transform function.
Revert "Add support for perspective(none) transform function."
[css-transforms-2] One more place that should refer to perspective(no…
Bug 1734704 [wpt PR 31158] - Add support for perspective(none) transf…
Bug 1734704 [wpt PR 31158] - Add support for perspective(none) transf…
Add support for perspective(none) transform function.
Bug 1734704 [wpt PR 31158] - Add support for perspective(none) transf…