How to Force Re-Render After a Webkit 3D Transform in Safari

-webkit-transform: scale() not displaying properly in OSX Safari

I had a similar problem and fixed it by setting the zoom level to the iframe content rather than the iframe element.

I fixed in my Rails app a like this.

<iframe src="/?zoom=0.5" />

And then on that page just styled it like this.

<% if params[:zoom] %>

 <style type="text/css" media="screen">
  html {
    -moz-transform: scale(<%= params[:zoom] %>);
    -moz-transform-origin: left top;
    -webkit-transform: scale(<%= params[:zoom] %>);
    -webkit-transform-origin: left top;
    transform: scale(<%= params[:zoom] %>);
    transform-origin: left top;
    zoom: <%= params[:zoom] %>;
  }
</style>

<% end %>

One could do the same thing with javascript by just reaching into the iframe styling the html element.

webkit-transform issue on safari using select elements

Safari tries to be helpful when there's a select box partially out of view, if you see:

http://jsfiddle.net/H5J27/

The first example doesn't have -webkit-transform, but when you click on it, it will be displaced in order to reveal it fully.

Now, Safari apparently isn't aware that, once transformed, the select box is in full view. The engine still thinks it's partially obstructed and it will move the select box and it's parent container to a point where it thinks you can see it.

The workarounds are not very encouraging. I'm guessing you're doing this coupled with animation in order to enjoy the benefits of hardware acceleration, so I'd add an event listener and the end of the animation, remove the css transform and apply normal positioning. This will get complicated if you have to do it on several elements, but it's good enough for a one time thing.

Scaling problem with -webkit-transform with mobile safari on iPad

I managed to solve the problem myself.

The solution is simple: just make sure the element is scaled to its original size to begin with:

-webkit-transform: scale(1);

There is one trick to it, though. If you, like I below, add a class to an element selected by #id, the #id has higher priority than the class and it will not show unless you tell the browser that it is important

-webkit-transform: scale(2) !important;

An alternative way to solve this is to not select the element by #id but by class (.block) or by element (div). Anything with lower priority than an id.

Solution follows:

<style type="text/css">

#block {
    position:absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 400px;
    -webkit-transition: -webkit-transform 3s ease-out;
    background-color: blue;
    -webkit-transform: scale(1);
  }

.zoom {
  -webkit-transform: scale(2) !important;
}
</style>
</head>

<body>
  <div id="block" onclick="className='zoom';">The Block</div>
</body>
</html>

webkit transform scale making items disappear

I had got a solution for this long back but forgot to update this post. This happens because of layer compositioning done by chrome. Please add translate3d(0px, 0px, 0px); in the transform string. Adding this will create a new layer for the item and issue will be fixed. :)
Read more about layer compositioning here : http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

css z-index lost after webkit transform translate3d

This might be related to: https://bugs.webkit.org/show_bug.cgi?id=61824

Basically when you apply a 3D transform on the z-axis, the z-index can't be accounted for anymore (you're now in a 3 dimensional rendering plane, use different z-values). If you want to switch back to 2D rendering for child elements, use transform-style: flat;.