I’ve being working on a project that uses a lot of CSS3 transform features for quite a while now and I’m fully away of all of the problems this can cause in webkit browsers. I know most of the cheaty fixes to get around these anti-aliasing glitches but what I’m unsure of is how to undo one of the inside a parent element.
For example, I have a a parent div and a image within it. If I have some transforms going on with the parent div the image inherits them as it is nested within the div but I can fix that by giving the child a negative rotation to revert it back to it’s original state. however when I use something like “-webkit-backface-visibility” or “translate3d(0,0,0)” to smooth out the edges of the parent the child inherits this as well blurring the image. Unlike the rotations there is no way that I’m aware of to revert the image back to it’s previous unblurred state.
Was hoping someone had a solution to this problem, I was building a pen to show the problem but I couldn’t recreate the issue in codepen but hopefully this pen show show why I need the fix. (Included comments):
http://cdpn.io/tFbEc
And here is a link to the issue in action on my site (The slider images, top right):
http://jamiepates.co.uk/PortPreview/