Problem with Animate.css in fonts in Safari

Asked

Viewed 277 times

6

I’m having problems with font rendering that have effects from the Animate.css plugin And that only happens on Safari. Website link.

As an example, the first three links of the menu are without any effect, and the last three are with the classes "animated fadeInDown". (Zoom in to see better) Exemplo de exibição no Safari

The source is "deformed", but in the hover, as you can see in the example, it becomes 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?

css
  • 2

    Try adding the code, or some excerpts you think are important, to clarify what’s going on. Without code it’s hard to imagine what it will be.

  • Dude, I’ve had this problem in a project with webfonts and the solution was to increase the font size 1 pixel. Try this solution, clear the cache before testing.

  • Oops, my mistake! I already added parts of the code that I think relevant. And as to increase the font size 1px, it did not help... And this happens in other parts of the site as well, with various types of font size, and several different fonts. Including system standards (Arial, Tahoma, etc...)

  • The problem is not in this part of the code, I copied the css and did not reproduce the problem, it worked perfectly. See: http://jsfiddle.net/Wqpnq/2/ Check that there is no CSS applied to ul or li or even Nav

  • @Filipe This happens with any H1, H2, H3, p.. Anyway, with everything... And accessing this link, here continues the problem in Safari. The source gets the same problem...

  • I tested here in Safari and it looks good, in the latest version 7.0.3, which version you use?

  • Put to http://jsfiddle.net and edit your question with an example link

  • 5.1.7, is the Windows version. But the client has MAC and the same thing happens. I added the Filipe jsfiddle.net link to the question!

  • I’m using Mac OSX and in this example the font is normal. It would be interesting if you put your own menu as example.

  • Opa Paulo Maciel, blz? So, here in this example that Filipe posted is occurring the same problem with the source when I access.

  • @Paulomaciel edited the answer with the link from the site. The strange thing is that it is on all the company’s computers, and on the client’s computer (a pro Macbook).

  • @Marcus, if you can describe in your question what effect you’re trying to have, because I’m looking here and the menu is really problematic, it’s not consistent with the effect you want on it. If you can describe how you want your animation.

  • @Paulomaciel I posted the site link on the question. The effect being used is fadeInDown, only when loading the site. The only problem is with the source in Safari.

  • @Marcus-david See the answer I left for you, I tested it here in Safari and solved the problem.

Show 9 more comments

2 answers

2


Good afternoon.

Add -webkit-font-smoothing: antialiased; in the block .nav > li > a so that it stays 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 not configured, e.g.: H1, H2, H3..

I hope I’ve helped.

  • Perfect friend! That solved the problem! Thank you very much!

0

I noticed that you are not listed on your site the css property text-Rendering: optimizeLegibility;. Have you tried that?

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.