Why does transform-origin-z distort on Safari, iOS?
css, mobile-safari, safari
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/
Problem
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? ``` <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> ```