iOS6 HTML Changes and Fixes

I have encountered an error with -webik-transform: translate3d(x,y,z); and -webkit-transform: preserve-3d; These seem to be broken on iOS6. Upon some research I came across Apples Change Log for the -webkit transforms it states 

"WebKit no longer always creates hardware-accelerated layers for elements with the -webkit-transform: preserve-3d option. Authors should stop using this option as a way to get hardware acceleration."


Well isnt that a *&$! 

I have also found a work around. Here are three properties that have seemed to work.

-webkit-transform: translateZ(0); -webkit-perspective: 1000; and -webkit-backface-visibility: hidden;

Another issue is changing the display-state on iOS like adding or removing an element to and from the DOM and is therefor a very heady calculation depending on how many items you have in your DOM that can easily cause the UI to freeze for a second or more. Display States that do not need to be used is Display:none; Display:block; etc. 

1	translate(100000px,100000px);

and if you want to show the element, just set the values to 0:

1	translate(0px,0px);

Tweets by @JunesIphone