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

emilio · 2021-08-02T09:31:24Z

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

The text was updated successfully, but these errors were encountered:

tabatkins · 2021-08-03T21:02:12Z

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 · 2021-08-03T22:38:56Z

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 · 2021-08-04T16:55:46Z

I guess perspective(calc(infinity * 1px)) or perspective(calc(1px / 0)) are already supposed to work, right?

tabatkins · 2021-08-04T18:03:30Z

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 · 2021-08-05T00:03:22Z

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 · 2021-08-05T00:05:30Z

Simon's question in the call about using infinite (from animation-iteration-count) vs infinity (from calc() 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 · 2021-08-11T16:15:36Z

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 · 2021-08-24T12:56:36Z

can i ask something?

from this document. it said identity transform is perspective(infinity). but from this resolved it add perspective(none). is it mean perspective(infinity) is change to perspective(none) or it mean perspective(none) and perspective(infinity) both valid?

emilio · 2021-08-24T20:59:08Z

Just perspective(none), afaict. That document needs to be updated.

emilio · 2021-08-24T20:59:42Z

I implemented this in Firefox in https://bugzilla.mozilla.org/show_bug.cgi?id=1725207, tests at web-platform-tests/wpt#30141

dbaron · 2021-09-27T19:18:30Z

I just double-checked with this test that none of Chromium, Gecko, or WebKit implement perspective(infinity).

This adds the ''none'' argument to the ''perspective()'' function, equivalent to infinity. Fixes w3c#6488.

This adds the ''none'' argument to the ''perspective()'' function, equivalent to infinity. Fixes #6488.

This updates the `perspective` property and `perspective()` function to reflect some existing errors (regarding negative values) and some new CSS working group resolutions that have at this point all shipped in Chrome and some of which have shipped in Gecko: * w3c/csswg-drafts#413 resolved that 0 is allowed in both the property and the function, but values of both that are less than 1px are clamped to 1px. * w3c/csswg-drafts#6488 added the `none` value to the perspective() function; it was already a value of the perspective property. It also adds some clarification about what large/small/none values mean.

This updates the `perspective` property and `perspective()` function to reflect some existing errors (regarding negative values) and some new CSS working group resolutions that have at this point all shipped in at least one of Firefox or Chrome (and which I think are all likely to ship in the other soon, and hopefully in Safari as well): * w3c/csswg-drafts#413 resolved that 0 is allowed in both the property and the function, but values of both that are less than 1px are clamped to 1px. * w3c/csswg-drafts#6488 added the `none` value to the perspective() function; it was already a value of the perspective property. It also adds some clarification about what large/small/none values mean.

This is an additional change for #6488, also needed for a followup to w3c/css-houdini-drafts#1051.

This adds support for the none value of the perspective() function of the transform property, and makes corresponding changes to the css-typed-om implementation. The changes to ui/gfx/geometry/ and compositor_transform_operations.cc correspond both to the interpolation changes in this patch and also some that should have been included in https://crrev.com/c/2924023 (to keep the compositor animation behavior matching the blink animation behavior). The added web-platform-tests in css/css-transforms/animation/transform-interpolation-perspective.html css/css-transforms/animation/support/transform-interpolation-reftests.js test for the need for both sets of changes to this code. The spec changes are linked from: w3c/csswg-drafts#6488 w3c/css-houdini-drafts#1051 Fixed: 1253596 Bug: 1205161 Change-Id: I84f4dc509bcfccdac0dde8e42669ac0ac5e2e38c

This updates the `perspective` property and `perspective()` function to reflect some existing errors (regarding negative values) and some new CSS working group resolutions that have at this point all shipped in at least one of Firefox or Chrome (and which I think are all likely to ship in the other soon, and hopefully in Safari as well): * w3c/csswg-drafts#413 resolved that 0 is allowed in both the property and the function, but values of both that are less than 1px are clamped to 1px. * w3c/csswg-drafts#6488 added the `none` value to the perspective() function; it was already a value of the perspective property. It also adds some clarification about what large/small/none values mean.

This adds support for the none value of the perspective() function of the transform property, and makes corresponding changes to the css-typed-om implementation. The changes to ui/gfx/geometry/ and compositor_transform_operations.cc correspond both to the interpolation changes in this patch and also some that should have been included in https://crrev.com/c/2924023 (to keep the compositor animation behavior matching the blink animation behavior). The added web-platform-tests in css/css-transforms/animation/transform-interpolation-perspective.html css/css-transforms/animation/support/transform-interpolation-reftests.js test for the need for both sets of changes to this code. The spec changes are linked from: w3c/csswg-drafts#6488 w3c/css-houdini-drafts#1051 Fixed: 1253596 Bug: 1205161 Change-Id: I84f4dc509bcfccdac0dde8e42669ac0ac5e2e38c

…9653) This updates the `perspective` property and `perspective()` function to reflect some existing errors (regarding negative values) and some new CSS working group resolutions that have at this point all shipped in at least one of Firefox or Chrome (and which I think are all likely to ship in the other soon, and hopefully in Safari as well): * w3c/csswg-drafts#413 resolved that 0 is allowed in both the property and the function, but values of both that are less than 1px are clamped to 1px. * w3c/csswg-drafts#6488 added the `none` value to the perspective() function; it was already a value of the perspective property. It also adds some clarification about what large/small/none values mean.

This adds support for the none value of the perspective() function of the transform property, and makes corresponding changes to the css-typed-om implementation. The changes to ui/gfx/geometry/ and compositor_transform_operations.cc correspond both to the interpolation changes in this patch and also some that should have been included in https://crrev.com/c/2924023 (to keep the compositor animation behavior matching the blink animation behavior). The added web-platform-tests in css/css-transforms/animation/transform-interpolation-perspective.html css/css-transforms/animation/support/transform-interpolation-reftests.js test for the need for both sets of changes to this code. The spec changes are linked from: w3c/csswg-drafts#6488 w3c/css-houdini-drafts#1051 Fixed: 1253596 Bug: 1205161 Change-Id: I84f4dc509bcfccdac0dde8e42669ac0ac5e2e38c

This adds support for the none value of the perspective() function of the transform property, and makes corresponding changes to the css-typed-om implementation. The changes to ui/gfx/geometry/ and compositor_transform_operations.cc correspond both to the interpolation changes in this patch and also some that should have been included in https://crrev.com/c/2924023 (to keep the compositor animation behavior matching the blink animation behavior). The added web-platform-tests in css/css-transforms/animation/transform-interpolation-perspective.html css/css-transforms/animation/support/transform-interpolation-reftests.js test for the need for both sets of changes to this code. The spec changes are linked from: w3c/csswg-drafts#6488 w3c/css-houdini-drafts#1051 Fixed: 1253596 Bug: 1205161 Change-Id: I84f4dc509bcfccdac0dde8e42669ac0ac5e2e38c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3202491 Reviewed-by: danakj <danakj@chromium.org> Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Reviewed-by: Kevin Ellis <kevers@chromium.org> Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org> Commit-Queue: David Baron <dbaron@chromium.org> Cr-Commit-Position: refs/heads/main@{#932253}

This adds support for the none value of the perspective() function of the transform property, and makes corresponding changes to the css-typed-om implementation. The changes to ui/gfx/geometry/ and compositor_transform_operations.cc correspond both to the interpolation changes in this patch and also some that should have been included in https://crrev.com/c/2924023 (to keep the compositor animation behavior matching the blink animation behavior). The added web-platform-tests in css/css-transforms/animation/transform-interpolation-perspective.html css/css-transforms/animation/support/transform-interpolation-reftests.js test for the need for both sets of changes to this code. The spec changes are linked from: w3c/csswg-drafts#6488 w3c/css-houdini-drafts#1051 Fixed: 1253596 Bug: 1205161 Change-Id: I84f4dc509bcfccdac0dde8e42669ac0ac5e2e38c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3202491 Reviewed-by: danakj <danakj@chromium.org> Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Reviewed-by: Kevin Ellis <kevers@chromium.org> Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org> Commit-Queue: David Baron <dbaron@chromium.org> Cr-Commit-Position: refs/heads/main@{#932253}

This reverts commit ae6f9bdb7e14b19650ee21cba03418ed35f1a2f5. Reason for revert: crbug.com/1260891 Original change's description: > Add support for perspective(none) transform function. > > This adds support for the none value of the perspective() function of > the transform property, and makes corresponding changes to the > css-typed-om implementation. > > The changes to ui/gfx/geometry/ and compositor_transform_operations.cc > correspond both to the interpolation changes in this patch and also some > that should have been included in https://crrev.com/c/2924023 (to keep > the compositor animation behavior matching the blink animation > behavior). The added web-platform-tests in > css/css-transforms/animation/transform-interpolation-perspective.html > css/css-transforms/animation/support/transform-interpolation-reftests.js > test for the need for both sets of changes to this code. > > The spec changes are linked from: > w3c/csswg-drafts#6488 > w3c/css-houdini-drafts#1051 > > Fixed: 1253596 > Bug: 1205161 > Change-Id: I84f4dc509bcfccdac0dde8e42669ac0ac5e2e38c > Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3202491 > Reviewed-by: danakj <danakj@chromium.org> > Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> > Reviewed-by: Kevin Ellis <kevers@chromium.org> > Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org> > Commit-Queue: David Baron <dbaron@chromium.org> > Cr-Commit-Position: refs/heads/main@{#932253} Bug: 1205161 Change-Id: Idb9332196c09ee6e4ff57f740419531465ef0148

…ne). Fixing the neutral element for addition was missed when making changes for perspective clamping and for adding 'perspective(none)'. Followup to #6488 and #413.

…orm function., a=testonly Automatic update from web-platform-tests Add support for perspective(none) transform function. This adds support for the none value of the perspective() function of the transform property, and makes corresponding changes to the css-typed-om implementation. The changes to ui/gfx/geometry/ and compositor_transform_operations.cc correspond both to the interpolation changes in this patch and also some that should have been included in https://crrev.com/c/2924023 (to keep the compositor animation behavior matching the blink animation behavior). The added web-platform-tests in css/css-transforms/animation/transform-interpolation-perspective.html css/css-transforms/animation/support/transform-interpolation-reftests.js test for the need for both sets of changes to this code. The spec changes are linked from: w3c/csswg-drafts#6488 w3c/css-houdini-drafts#1051 Fixed: 1253596 Bug: 1205161 Change-Id: I84f4dc509bcfccdac0dde8e42669ac0ac5e2e38c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3202491 Reviewed-by: danakj <danakj@chromium.org> Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Reviewed-by: Kevin Ellis <kevers@chromium.org> Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org> Commit-Queue: David Baron <dbaron@chromium.org> Cr-Commit-Position: refs/heads/main@{#932253} -- wpt-commits: 58a3fe3ce41a3eb164966c744baccd4ce459f07c wpt-pr: 31158

This adds support for the none value of the perspective() function of the transform property, and makes corresponding changes to the css-typed-om implementation. The changes to ui/gfx/geometry/ and compositor_transform_operations.cc correspond both to the interpolation changes in this patch and also some that should have been included in https://crrev.com/c/2924023 (to keep the compositor animation behavior matching the blink animation behavior). The added web-platform-tests in css/css-transforms/animation/transform-interpolation-perspective.html css/css-transforms/animation/support/transform-interpolation-reftests.js test for the need for both sets of changes to this code. The spec changes are linked from: w3c/csswg-drafts#6488 w3c/css-houdini-drafts#1051 Fixed: 1253596 Bug: 1205161 Change-Id: I84f4dc509bcfccdac0dde8e42669ac0ac5e2e38c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3202491 Reviewed-by: danakj <danakj@chromium.org> Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Reviewed-by: Kevin Ellis <kevers@chromium.org> Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org> Commit-Queue: David Baron <dbaron@chromium.org> Cr-Commit-Position: refs/heads/main@{#932253}

This adds support for the none value of the perspective() function of the transform property, and makes corresponding changes to the css-typed-om implementation. The changes to ui/gfx/geometry/ and compositor_transform_operations.cc correspond both to the interpolation changes in this patch and also some that should have been included in https://crrev.com/c/2924023 (to keep the compositor animation behavior matching the blink animation behavior). The added web-platform-tests in css/css-transforms/animation/transform-interpolation-perspective.html css/css-transforms/animation/support/transform-interpolation-reftests.js test for the need for both sets of changes to this code. The spec changes are linked from: w3c/csswg-drafts#6488 w3c/css-houdini-drafts#1051 Fixed: 1253596 Bug: 1205161 Change-Id: I84f4dc509bcfccdac0dde8e42669ac0ac5e2e38c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3202491 Reviewed-by: danakj <danakj@chromium.org> Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Reviewed-by: Kevin Ellis <kevers@chromium.org> Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org> Commit-Queue: David Baron <dbaron@chromium.org> Cr-Commit-Position: refs/heads/main@{#932253} NOKEYCHECK=True GitOrigin-RevId: ae6f9bdb7e14b19650ee21cba03418ed35f1a2f5

emilio changed the title ~~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 Aug 2, 2021

emilio added Agenda+ css-transforms-1 Current Work css-transforms-2 labels Aug 2, 2021

css-meeting-bot removed the Agenda+ label Aug 11, 2021

mozilla-apprentice mentioned this issue Aug 11, 2021

[css-transforms] After #6320 there's no way to get an identity transform for interpolation of perspective mozilla/wg-decisions#615

Closed

emilio added the Needs Edits label Aug 24, 2021

mix5003 mentioned this issue Sep 2, 2021

add example for transform: perspective(none); mdn/interactive-examples#1898

Merged

dbaron self-assigned this Sep 27, 2021

dbaron removed the css-transforms-1 Current Work label Sep 27, 2021

dbaron added a commit to dbaron/csswg-drafts that referenced this issue Sep 27, 2021

[css-transforms-2] Add ''perspective(none)''.

b1d8fc9

This adds the ''none'' argument to the ''perspective()'' function, equivalent to infinity. Fixes w3c#6488.

dbaron mentioned this issue Sep 27, 2021

[css-transforms-2] Add ''perspective(none)''. #6691

Merged

dbaron closed this as completed in #6691 Sep 29, 2021

dbaron added a commit that referenced this issue Sep 29, 2021

[css-transforms-2] Add ''perspective(none)''. (#6691)

acd5bca

This adds the ''none'' argument to the ''perspective()'' function, equivalent to infinity. Fixes #6488.

This was referenced Oct 7, 2021

Updates to CSS perspective property and perspective() function. mdn/content#9653

Merged

[css-typed-om] update CSSPerspectiveValue to accept perspective(none) w3c/css-houdini-drafts#1051

Closed

dbaron added a commit that referenced this issue Oct 13, 2021

[css-transforms-2] Export the definition of perspective(none).

32de8e5

This is an additional change for #6488, also needed for a followup to w3c/css-houdini-drafts#1051.

chromium-wpt-export-bot mentioned this issue Oct 13, 2021

Add support for perspective(none) transform function. web-platform-tests/wpt#31158

Merged

chromium-wpt-export-bot mentioned this issue Oct 18, 2021

Revert "Add support for perspective(none) transform function." web-platform-tests/wpt#31299

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

emilio commented Aug 2, 2021 •

edited

Loading

tabatkins commented Aug 3, 2021

mattwoodrow commented Aug 3, 2021

Loirooriol commented Aug 4, 2021

tabatkins commented Aug 4, 2021

css-meeting-bot commented Aug 5, 2021

tabatkins commented Aug 5, 2021

css-meeting-bot commented Aug 11, 2021

mix5003 commented Aug 24, 2021 •

edited

Loading

emilio commented Aug 24, 2021

emilio commented Aug 24, 2021

dbaron commented Sep 27, 2021

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

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

Comments

emilio commented Aug 2, 2021 • edited Loading

tabatkins commented Aug 3, 2021

mattwoodrow commented Aug 3, 2021

Loirooriol commented Aug 4, 2021

tabatkins commented Aug 4, 2021

css-meeting-bot commented Aug 5, 2021

tabatkins commented Aug 5, 2021

css-meeting-bot commented Aug 11, 2021

mix5003 commented Aug 24, 2021 • edited Loading

emilio commented Aug 24, 2021

emilio commented Aug 24, 2021

dbaron commented Sep 27, 2021

emilio commented Aug 2, 2021 •

edited

Loading

mix5003 commented Aug 24, 2021 •

edited

Loading