[Bug 16349] New: backface-visibility underdefined

https://www.w3.org/Bugs/Public/show_bug.cgi?id=16349

           Summary: backface-visibility underdefined
           Product: CSS
           Version: unspecified
          Platform: All
        OS/Version: All
            Status: NEW
          Severity: normal
          Priority: P2
         Component: Transforms
        AssignedTo: smfr@me.com
        ReportedBy: ayg@aryeh.name
         QAContact: public-css-bugzilla@w3.org
                CC: ayg@aryeh.name, cmarrin@apple.com, eoconnor@apple.com,
                    smfr@me.com, dino@apple.com, dschulze@adobe.com


"""
The visibility of an element with ‘backface-visibility: hidden’ is determined
as follows:

1. Compute a matrix representing the accumulated transform from the viewport,
taking the translations due to the CSS visual formatting mode, the perspective
and transformation matrices into account, in a similar manner to the
computation of the accumulated transform for an element in a 3D rendering
context.

2. If the component of the matrix in row 3, column 3 is negative, then the
element should be hidden, otherwise it is visible.

ISSUE 6: Is the relevant matrix here really relative to the viewport, or to the
root of the 3D rendering context?
"""
http://dev.w3.org/csswg/css3-transforms/#backface-visibility-property

This needs to be resolved.  Testing in browsers:

* IE10 Developer Preview, Windows 8
* Firefox 13.0a1, Ubuntu 32-bit with nouveau/Gallium3D
* Chrome 19 dev, Ubuntu 32-bit with nouveau/Gallium3D (no GPU acceleration)
* Chrome 19 dev, Ubuntu 64-bit with Intel mesa (GPU acceleration)
* WebKit nightly r109732, Windows 8

Test-case 1:

data:text/html,<!DOCTYPE html>
<div style="height:100px;width:100px;background:lime">
<div style="height:100px;width:100px;background:red;
transform:rotatex(180deg);backface-visibility:hidden">
</div>
</div>

This should obviously display green.  All browsers get this right except Chrome
without GPU acceleration, which I suspect doesn't support backface-visibility
at all, so I exclude it from further testing.

Test-case 2:

data:text/html,<!DOCTYPE html>
<div style="height:100px;width:100px;background:lime;
transform:rotatex(180deg)">
<div style="height:100px;width:100px;background:red;
transform:rotatex(180deg);backface-visibility:hidden">
</div>
</div>

This displays green in all browsers except Chrome (with GPU acceleration),
which displays red.  I think green is correct -- the matrix should be relative
to the root of the 3D rendering context, which in this case is just one
rotatex(180deg), since there's no preserve-3d.

Test-case 3:

data:text/html,<!DOCTYPE html>
<div style="height:100px;width:100px;background:lime">
<div style="transform:rotatex(60deg);transform-style:preserve-3d">
<div style="height:100px;width:100px;background:red;
transform:rotatex(60deg);backface-visibility:hidden">
</div></div></div>

This displays green in all tested browsers, except IE10, which displays a band
of red because it doesn't support preserve-3d.  This matches the idea that the
matrix is relative to the root of the 3D rendering context.

Test-case 4:

data:text/html,<!DOCTYPE html>
<style>div { width: 100px; height: 100px }</style>
<div style="transform: rotateX(180deg); background: red">
  <div style="backface-visibility: hidden; background: lime"></div>
</div>

This should display green: no transform affects the inner div.  It does display
green in Firefox, Chrome, and Safari.  But in IE it displays red.  Presumably
IE accumulates transforms up to the viewport, even though the transform-style
is flat.

Test-case 5:

data:text/html,<!DOCTYPE html>
<style>div { width: 100px; height: 100px }</style>
<div style="transform: rotateX(180deg); transform-style: preserve-3d;
background: lime">
  <div style="backface-visibility: hidden; background: red"></div>
</div>

This displays green in Firefox, but red in Chrome and Safari.  It should
display green, because the child div is rotated 180 degrees due to the
preserve-3d, so it should be invisible.  (This is
<https://bugzilla.mozilla.org/show_bug.cgi?id=730166>.)

Test-case 6:

data:text/html,<!DOCTYPE html>
<style>div { height: 100px; width: 100px }</style>
<div style="background: lime">
  <div style="background: red; backface-visibility: hidden;
  transform: scaleZ(-1)"></div>
</div>

This displays green in IE, Firefox, and Safari, but red in Chrome.  Per the
current spec, Chrome is definitely wrong.  I wonder what alternative way of
determining backface-visibility it's using.


I propose that the above quoted spec text be replaced with:

"""
The visibility of an element with ‘backface-visibility: hidden’ is determined
as follows:

1. For an element in a 3D rendering context, compute its accumulated
transformation matrix.  For an element not in a 3D rendering context, compute
its transformation matrix.

2. If the component of the matrix in row 3, column 3 is negative, then the
element should be hidden, otherwise it is visible.
"""

"accumulated transformation matrix" should be a hyperlink to the steps used to
figure out the rendering of an element in a 3D rendering context.

This change will make green the correct answer in all of the test-cases I
provided here.  Any objections?  (In particular, this appears to be exactly how
Gecko behaves, but all other engines will need some changes.)

-- 
Configure bugmail: https://www.w3.org/Bugs/Public/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the QA contact for the bug.

Received on Tuesday, 13 March 2012 20:50:37 UTC