The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Safari 5 CSS Transform Render Bug?

  • # November 7, 2011 at 6:18 am

    Hi Guys,

    I added a little CSS Transform Scale to the website: – it just scale up the social icons at the right top of the page. But when you rollover it using Safari on Mac, almost all the text blinks. It is working fine with FF Mac and PC, Chrome Mac and PC and IE 9.

    Only with Safari I am having this bug. I tried to search internet for this error but couldn’t find. So I don’t know if I missed something or it’s a real bug.

    Here is the session of the code:


    and CSS:

    /* Social Media Icons */
    .social-media { float: right; width: 116px; margin-top: 40px; }
    .social-media li { display: inline; float: left; }
    .social-media li a {
    display: block;
    width: 32px;
    height: 32px;
    text-indent: -9999em;
    background: transparent url('../imagens/social-icons_bg.png') no-repeat left bottom;
    margin-right: 10px;

    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    -o-transform: scale(.8);
    transform: scale(.8);

    -webkit-transition: -webkit-transform .1s ease;
    -moz-transition: -moz-transform .1s ease;
    -ms-transition: -ms-transform .1s ease;
    -o-transition: -o-transform .1s ease;
    transition: transform .1s ease;

    .social-media li a:hover {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);

    Any ideas?

    P.S. I already tried -webkit-backface-visibility: hidden; – but it blinks 1 time and change the font rendering.


    # December 28, 2012 at 12:52 pm

    I have exactly the same problem on this site: The sidebar text blinks when the slideshow transitions between the slides (in Safari). Have you found the solution?

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed