Document zero-perspective transform quirk

[miketaylr]

trafficstars

See https://bugzilla.mozilla.org/show_bug.cgi?id=1009150.

It seems IE 11 and Edge also implemented this quirk (or had it).

@karlcow made a test (you should see a yellow box if the UA supports this quirk): http://codepen.io/anon/pen/ZGKmLQ?editors=110

[karlcow]

So I created another pen to partly better show the issue:

p.zero {
  background-color: pink;
  width: 200px;
  transform: perspective(0px) translate(260px, 0);
}

p.notzero {  background-color: pink;
  width: 200px;
  transform: perspective(0.0001px) translate(260px, 0);
}

div {
  width: 200px;
  background-color: yellow;
}

And this is the result:

• Left: Firefox Nightly 48.0a1 (2016-04-03)
• Center: Safari Technology Preview Version 9.1.1 (11601.6.10, 11602.1.25)
• Right: Opera Beta 37.0.2178.4

[karlcow]

And just for the fun of it in Gecko.

[upsuper]

I guess this needs an email to the CSSWG. And also, it seems there is a typo in the spec which says perspective(0) is a "Neutral element for addition".

[karlcow]

to requote the current draft spec here, aka: CSS Transforms Module Level 1. Editor’s Draft, 20 August 2015 in https://drafts.csswg.org/css-transforms/#funcdef-perspective

perspective() = perspective( ) specifies a perspective projection matrix. This matrix scales points in X and Y based on their Z value, scaling points with positive Z values away from the origin, and those with negative Z values towards the origin. Points on the z=0 plane are unchanged. The parameter represents the distance of the z=0 plane from the viewer. Lower values give a more flattened pyramid and therefore a more pronounced perspective effect. For example, a value of 1000px gives a moderate amount of foreshortening and a value of 200px gives an extreme amount. The value for depth must be greater than zero, otherwise the function is invalid.

[cvrebert]

CSSWG thread: https://lists.w3.org/Archives/Public/www-style/2016Apr/0028.html

[karlcow]

Ah the rounding issue mentioned in the thread is exactly what is at stake in my test above.

[cvrebert]

The thread ended with https://lists.w3.org/Archives/Public/www-style/2016Apr/0131.html , but it doesn't look like any spec edits have been made yet.

[karlcow]

Implemented in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1274158

[upsuper]

Firefox clamps 0 to the smallest non-zero float value as suggested by Tab.

[cvrebert]

This now seems unnecessary given https://github.com/w3c/csswg-drafts/issues/413#issuecomment-272231557