Grow your CSS skills. Land your dream job.

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: http://www.canadaturismo.com.br – 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:

    HTML



    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.

    Thanks

    # December 28, 2012 at 12:52 pm

    I have exactly the same problem on this site: http://www.douglasdentistryfl.com/dentist-lutz-fl.php. 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.

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