726397 - Child elements of parent with perspective do not have parent's perspective-origin

Status: RESOLVED DUPLICATE of bug 721082

(Core :: Layout, defect)

Description

[David DeSandro]

Attachment: 3d-transform-children.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.11 Safari/535.19

Steps to reproduce:

I used a CSS 3D transforms on a group of elements, whose parent has the perspective.

See example: http://desandro.github.com/3dtransforms/examples/perspective-02-children.html#blue
And issue: https://github.com/desandro/3dtransforms/issues/5



CSS:

    .container {
      width: 200px;
      height: 200px;
      -moz-perspective: 400px;
    }
    
    .container figure {
      display: block;
      width: 55px;
      height: 55px;
      float: left;
      margin: 5px;
      -moz-transform: rotateY( 45deg );
    }

HTML:

    <section class="container">
      <figure></figure>
      <figure></figure>
      <figure></figure>
      ...
    </section>



Actual results:

Child elements have their own perspective-origin, which is in the horizontal and vertical center of their own area.


Expected results:

The container has `perspective`. From the [CSS 3D Transform spec](http://www.w3.org/TR/css3-3d-transforms/)

> The ‘perspective’ property applies the same transform as the perspective(<number>) transform function, except that it applies only to the positioned or transformed children of the element, not to the transform on the element itself.
...
The use of this property with any value other than ‘none’ establishes a stacking context. It also establishes a containing block (somewhat similar to position:relative), just like the ‘transform’ property does.

Thus, it has `perspective-origin`

> The ‘perspective-origin’ property establishes the origin for the perspective property. It effectively sets the X and Y position at which the viewer appears to be looking at the children of the element.

Both of these properties mention how the effect is applied to the children. In this example, the container has perspective, so all children are a part of that 3D environment, the perspective origin for all of them is in the center of the container, not in the each of each child.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Aryeh, could you add a test for this, please, assuming the spec reading is correct?

David, note that you're reading a very old (almost 3-year-old) spec draft.  The current draft is at http://dev.w3.org/csswg/css3-3d-transforms/ but for this one part the text looks about the same as it used to be.

Comment 2

[Aryeh Gregor (:ayg) (no longer with Mozilla)]

It works correctly for me in the latest mozilla-central (with a few patches applied).  Please try in an extremely recent nightly, like last night's, and reopen the bug if the issue is still there.  It should have been fixed a day or two ago.