Search code examples
csssafarimobile-safari

Why does transform-origin-z distort on Safari, iOS?

I've been building a prism rotation effect using 3D transforms. The transform-origin-z property seemed best for transforming the faces of the prism, but Safari 5 and Mobile Safari inexplicably stretch my element, even when no transform is applied. Firefox 12 and Chrome 18 work correctly.

Live Demo

Full Prism Demo

I'm interested in understanding why this happens. Should I avoid transform-origin-z entirely, or is there some workaround for Safari and Mobile Safari?

Screen shot

<style>
  /* other browser prefixes omitted for brevity */
  .container {
    margin: 50px;
    border: 2px solid #00f;
    height: 50px;
    -webkit-perspective: 500px;
  }
  .face {
    height: 50px;
    background-color: rgba(255,0,0,0.5);
    -webkit-transform-origin: center center -25px;
    -webkit-transform: translate3d(0,0,0);
  }
</style>

<div class="container">
  <div class="face"></div>
</div>​
Solution

  • it seems like this is a bug in Safari. Chrome moves the transformation-center over the Z-axis, Safari leaves this center were it was, but moves the object itself over the Z-axis. The object therefore is zoomed in Safari, and seems bigger.

    I would avoid the transform-origin (on Z-axis) for now and work with translate-Z to produce the same effect.

    Example:

    http://jsfiddle.net/willemvb/GuhcC/3/