Last Comment Bug 726397 - Child elements of parent with perspective do not have parent's perspective-origin
: Child elements of parent with perspective do not have parent's perspective-or...
Status: RESOLVED DUPLICATE of bug 721082
:
Product: Core
Classification: Components
Component: Layout (show other bugs)
: 10 Branch
: x86 Mac OS X
: -- normal (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
: Jet Villegas (:jet)
Mentors:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2012-02-11 20:43 PST by David DeSandro
Modified: 2012-02-17 11:22 PST (History)
5 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
3d-transform-children.png (25.35 KB, image/png)
2012-02-11 20:43 PST, David DeSandro
no flags Details

Description User image David DeSandro 2012-02-11 20:43:25 PST
Created attachment 596419 [details]
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 User image Boris Zbarsky [:bz] (still a bit busy) 2012-02-17 10:37:48 PST
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 User image Aryeh Gregor (:ayg) (next working March 28-April 26) 2012-02-17 11:22:25 PST
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.

*** This bug has been marked as a duplicate of bug 721082 ***

Note You need to log in before you can comment on or make changes to this bug.