Note: There are a few cases of duplicates in user autocompletion which are being worked on.

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

RESOLVED DUPLICATE of bug 721082

Status

()

Core
Layout
RESOLVED DUPLICATE of bug 721082
6 years ago
6 years ago

People

(Reporter: David DeSandro, Unassigned)

Tracking

10 Branch
x86
Mac OS X
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

6 years ago
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.

Updated

6 years ago
Component: Untriaged → Layout
Product: Firefox → Core
QA Contact: untriaged → layout

Comment 1

6 years ago
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.
Status: UNCONFIRMED → NEW
Ever confirmed: true
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.
Status: NEW → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 721082
You need to log in before you can comment on or make changes to this bug.