Why Does Transform-Origin-Z Distort on Safari, iOS

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

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/

WebKit: Is there any css trick to bring elements to front without scaling it?

I do not have access to Safari at present to test it in, so I leave that to you (let me know if it works), but I believe the following should work.

Since browser interpretation of -webkit-perspective seems to be the problem as I noted in my answer to this question, remove it from #container and replace it with -webkit-transform: perspective(500) and then add the same thing (-webkit-transform: perspective(500)) to both #parent and #parent2 which is what I have done in this fiddle.

The issue seems to be that Safari does not apply a perspective to the #container when using -webkit-perspective whereas Chrome does. It seems to be a matter of interpretation of the spec, as I discussed in answering the other question.

Webkit-based blurry/distorted text post-animation via translate3d

As @Robert mentioned above, sometimes adding background helps, but not always.

So, for the example Dmitry added that's not the only thing you must do: except from the background, you must tell browser to explicitly use the proper anti-aliasing, so, there is a fixed Dmitry's example: http://jsfiddle.net/PtDVF/1/

You need to add these styles around (or for the) blocks where you need to fix the anti-aliasing:

background: #FFF; /* Or the actual color of your background/applied image */
-webkit-font-smoothing: subpixel-antialiased;

Prevent flicker on webkit-transition of webkit-transform

The solution is mentioned here: iPhone WebKit CSS animations cause flicker.

For your element, you need to set

-webkit-backface-visibility: hidden;

Positions fixed doesn't work when using -webkit-transform

After some research, there has been a bug report on the Chromium website about this issue, so far Webkit browsers can't render these two effects together at the same time.

I would suggest adding some Webkit only CSS into your stylesheet and making the transformed div an image and using it as the background.

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Webkit-specific CSS here (Chrome and Safari) */

  #transformed_div {
    /* styles here, background image etc */
  }
}

So for now you'll have to do it the old fashioned way, until Webkit browsers catch up to FF.

EDIT: As of 10/24/2012 the bug has not been resolved.

This appears to not be a bug, but an aspect of the specification due to the two effects requiring separate coordinate systems and stacking orders. As explained in this answer.

Fixed Background Image Causing Unwanted Repositioning in iOS Safari?

Please try the code below.

I've slightly changed your code and removed unnecessary and ivalid css rules.

html, body {  height: 100%; width: 100%;  margin: 0; padding: 0;}
.sitebg {  position: absolute;  top: 50%; left: 50%;  width: 2000px; height: 2000px;  margin: -1000px 0 0 -1000px;  background: url("http://s3.gomedia.us/wp-content/uploads/2008/06/skullbg-green.gif");  transform-origin: 50% 50%;  -webkit-animation: 180s rotatebg infinite linear;  animation: 180s rotatebg infinite linear;}
.sitebg-parent {  position: absolute; z-index: -1;  top: 0; right: 0; bottom: 0; left: 0;  overflow: hidden;}
@-webkit-keyframes rotatebg {  0% {-webkit-transform: rotateZ(0deg)}  100% {-webkit-transform: rotateZ(360deg)}}
@keyframes rotatebg {  0% {transform: rotateZ(0deg)}  100% {transform: rotateZ(360deg)}}

<body>  <div class="sitebg-parent">    <div class="sitebg"></div>  </div></body>

CSS3 translateZ doesn't work for chrome?

Win XP vs. Win 7 Difference

There is at least one other who experienced this difference between Win XP and Win 7 regarding translateZ, as this issue report notes (though it was not resolved).

Whether the difference is a bug or a feature upgrade from a 32-bit to 64-bit system is unclear. In either case, there is probably not a solution you can do through your CSS coding to resolve it.

CSS transition effect makes image blurry / moves image 1px, in Chrome?

2020 update

If you have issues with blurry images, be sure to check answers from below as well, especially the image-rendering CSS property.
For best practice accessibility and SEO wise you could replace the background image with an <img> tag using object-fit CSS property.

Original answer

Try this in your CSS:

.your-class-name {
    /* ... */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
}

What this does is it makes the division to behave "more 2D".

Backface is drawn as a default to allow flipping things with rotate
and such. There's no need to that if you only move left, right, up, down, scale or rotate (counter-)clockwise.
Translate Z-axis to always have a zero value.
Chrome now handles backface-visibility and transform without the -webkit- prefix. I currently don't know how this affects other browsers rendering (FF, IE), so use the non-prefixed versions with caution.

Why Does Transform-Origin-Z Distort on Safari, iOS