Question

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!

Answer 1

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); }