Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Webkit Anti-alias bugs

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #44511
    Cyanoxide
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.