Get GSAP

Version: 1.13.1 updated 2014-07-22

Core

    Extras

      Plugins

        By using GreenSock code, you agree to the terms of use.

        Jump to content

        Codepen Notification

        You didn't provide a codepen sample that illustrates the problem. It really helps us quickly identify problems. This isn't mandatory, but it will get you better/faster results. Would you like to add one?

        How to fix rendering artifacts in Chrome

        Started by Ahrengot, Aug 28 2012 10:07 AM Chrome Google Chrome rendering scale

        3 replies to this topic
        Ahrengot

        Post #1 by Ahrengot , 28 August 2012 - 10:07 AM

        Hey guys,

        From time to time I get wierd rendering artifacts in Google Chrome when using TweenMax. They only appear in Chrome, so I'm pretty sure its a bug in that particular browser, but I'd really like to get rid of them.

        Does this only happen to me? Does anyone know a hack to git rid of these artifacts?

        There's a live demo of the issue here: http://ahrengot.com/...round/tweenmax/ ... Click anywhere to animate the box and see the issue.

        And here's a screenshot of the artifacts:
        Posted Image
        • Back to top

        Ahrengot

        Post #2 by Ahrengot , 28 August 2012 - 01:00 PM

        Actually, I can see that switching from public realease version of chrome (v.21) to the latest developer build (v.23) fixes the problem, so it seems like they're aware of it.

        Anyway, it would still be nice if anyone knew of a temporary fix.
        • Back to top

        Carl

          Administrator

        • Carl
        • 4,914 posts

        Post #3 by Carl , 28 August 2012 - 01:03 PM

        Hi Ahrengot

        Thank you for posting the very clear example. I have seen this occasionally myself.
        Your demo shows artifacts in Chrome for me but not in Safari. I know that my own examples have not reproduced artifactson other systems running Chrome so perhaps its a browser/video card combo issue. I've also seen it in Safari on iOS.

        The fix is adding the following css:
        -webkit-backface-visibility:hidden;

        live demo:
        http://jsfiddle.net/...bassador/F2J3s/

        artifacts visible
        //Mac Chrome Version 21.0.1180.79
        //video card: ATI Radeon HD 4850
        • Back to top

        colep

        Post #4 by colep , 03 September 2012 - 02:49 AM

        Thank you so much!
        • Back to top




        0 user(s) are reading this topic

        0 members, 0 guests, 0 anonymous users