Problem with animate.css in fonts in Safari

Navigation
6

I'm having problems rendering fonts that have effects from the Animate.css plugin And that only happens in Safari. Website Link .

As an example, the first three links in the menu have no effect, and the last three links are with the "animated fadeInDown" classes. (Enlarge image for a better view)

The font is half deformed, but in hover , as you can see in the example, it is normal. 

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
       -webkit-transform: translateY(-20px);
       transform: translateY(-20px);
    }

    100% {
       opacity: 1;
       -webkit-transform: translateY(0);
       transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}
.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

.nav > li > a {
    position: relative;
    display: block;
    padding: 11px 15px;
    color: #b3b3b3
}
.nav > li > a:hover,
.nav > li > a:focus {
    text-decoration: none;
    background-color: #fff;
    color: #cf6150;
}

What can be done to solve this?

    
asked by anonymous 07.05.2014 / 15:57

2 answers

2

Good afternoon.

Add -webkit-font-smoothing: antialiased; to block .nav > li > a to be as below: 

.nav > li > a {
position: relative;
display: block;
padding: 11px 15px;
color: #B3B3B3;
-webkit-font-smoothing: antialiased;
}

Add in the declaration of the other elements also where the sources are unconfigured, eg H1, H2, H3 ..

I hope I have helped.

    
12.05.2014 / 22:40
0

I noticed that your css property text-rendering: optimizeLegibility; is not on your site. Have you tried this?

    
12.05.2014 / 14:49
Generate contour graphics on a map of 360 * 360 positions with weights from 0 to 1 Increase login session time google with Laravel 4