Search code examples
cssfont-facecss-animations

Safari applying font effect / treatment when element is CSS3-animated

I'm using a custom font on my site.

@font-face {
    font-family: 'ProximaNovaCondensed-Regular';
    src: url('/media/fonts/proximanovacond-regular-webfont.eot');
    src: url('/media/fonts/proximanovacond-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('/media/fonts/proximanovacond-regular-webfont.woff') format('woff'),
    url('/media/fonts/proximanovacond-regular-webfont.ttf') format('truetype'),
    url('/media/fonts/proximanovacond-regular-webfont.svg#proxima_nova_cn_rgregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

When applying a pulsating CSS3 animation to a text element, the font rendering method seems to change.

See this comparison image:

enter image description here

This was rendered in Safari.

I found this Q/A: Safari changing font weights when unrelated animations are running

According to what is said there, the rendering is done by the GPU once animations are applied. While in the Q/A in the link the issue is focussing on other elements than the affected one, in my case the actual element is affected.

The question is:

Can i somehow turn off or modify this behaviour, so that i get accurate (unified) font rendering qualities throughout my page, regardless of whether i use animations or not?

Solution

  • No perfect solutions but you could try adding -webkit-font-smoothing: antialiased; and see if that helps. It might give you a slightly thinner font, but it will at least be unified.

    EDIT - Sorry , I just saw that the "antialiased" fix was posted in the Q/A you linked to.

    Sometimes, adding -webkit-backface-visibility: hidden; to the affected elements helps, but I'm not really sure why though.

    You can also try -webkit-transform: translate3d(0,0,0); which will force hardware acceleration and make the font, as the fix above, unified but slightly thinner ...

    Hope that helps!