Safari 5 CSS Transform Render Bug?

[sgobin]

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

Veja nossos videos no Youtube.


Siga-nos no Twitter.


Curta nossa página no facebook.

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

[pixel_by_pixel]

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?

[Author]

Posts