Grow your CSS skills. Land your dream job.

Webkit Anti-alias bugs

  • # May 2, 2013 at 6:01 pm

    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/

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".