StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>I believe the following explanation answers the "why" Safari is doing what it is</strong></p> <p>I do not have access to Safari for testing, but as I read the specifications for the <code>perspective</code> property (<a href="http://www.w3.org/TR/css3-3d-transforms/#perspective-property" rel="nofollow">the same spec page you point to</a>), it states:</p> <blockquote> <p>The ‘perspective’ property applies the same transform as the perspective() transform function, except that it applies only to the positioned or transformed children of the element, not to the transform on the element itself.</p> </blockquote> <hr> <p><strong>Update on how I read the above spec</strong></p> <blockquote> <p>The ‘perspective’ property applies the same transform as the perspective() transform function</p> </blockquote> <p>This tells me a perspective transform is going to be done just as if <code>transform: perspective(500px)</code> were applied in this case.</p> <blockquote> <p>except that it applies only to the positioned or transformed children of the element</p> </blockquote> <p>This tells me the perspective transform is going to be applied to child elements, in this case <code>.face</code>. Here, there seems to be some ambiguity. Is this saying the perspective should only be applied if another transform is done on the child element? And, does the <code>tranform-origin</code> property count as a transform being done to the child (especially since it is this value that relates directly to the <code>perspective</code> transform)? <em>It is at this point of ambiguity that the browsers seem to differ.</em> Safari is doing the <code>perspective</code> transform because the child element has <code>tranform-origin</code> set to <code>-25px</code>, whereas the others apparently are not (at least, not until the actual other <code>transform</code> does something else to the <code>.face</code> during the animation).</p> <blockquote> <p>not to the transform on the element itself</p> </blockquote> <p>This tells me the <code>z=0</code> of <code>.container</code> is irrelevant, because the transform from this property is not affecting <code>.container</code>, but rather <code>.container</code>'s children (i.e. <code>.face</code>).</p> <hr> <p>So Safari appears to be taking the position that your <code>.face</code> <em>always has a transform applied</em> because you have set <code>.container</code> to have <code>-webkit-perspective: 500px;</code>, so there is always a <code>perspective</code> transform being applied to the child elements (<code>.face</code> in your case).</p> <p>Note that if you take away the animation, and apply an actual <code>transform: perspective(500px)</code> to the <code>.face</code> you will <a href="http://jsfiddle.net/eaBSW/10/" rel="nofollow"><strong>see the same result in Firefox or Chrome as what you experience in Safari</strong></a> with your code.</p> <p><strong>So I think actually, <em>Safari may be doing it correctly</em>, and Firefox and Chrome perhaps are not.</strong> The spec has some ambiguity. The other two browsers perhaps should be still applying the perspective transform based off <code>.container</code> like Safari does, but certainly appear to not be, whereas Safari obviously appears to be.</p> <p>To eliminate the issue (not have it "stick out" when "at rest"), you probably need to </p> <ol> <li>Animate the <code>transform-origin</code> itself at the beginning of your animation (and reset to <code>0</code> afterwards), <em>OR</em>...</li> <li>Animate the <code>perspective</code> value itself to be <code>0</code> when "at rest" and <code>500px</code> when animating.</li> </ol> <p>My guess is #1 will be easier to implement, but I don't know for sure.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload