Setting the webkit perspective CSS property on an iPad3 make child elements render very blurry , like images render if they are for non retina displays. To be clear I am not talking about images rendering blurry, DOM child elements are rendering blurry.
What can be done about that?
Simply removing the property is not an options, since I use animations that require movement in Z-Axis.
Property is set like this in CSS:
-webkit-perpective: 500;
Thanks for any help on this!
Not sure if this will help, but there's a mention of this sort of thing in this article by front-end god David DeSandro, under the section "RETURNING TO THE Z-AXIS ORIGIN":
http://24ways.org/2010/intro-to-css-3d-transforms
In order to keep 3-D transforms snappy, Safari composites the element, then applies the transform. Consequently, anti-aliasing on text will remain whatever it was before the transform was applied. When transformed forward in 3-D space, significant pixelation can occur...
...To resolve the distortion and restore pixel perfection to our #cube, we can push the 3-D object back, so that the front face will be positioned back to the Z-axis origin.
#cube { -webkit-transform: translateZ(-100px); }