CSS3 transition messing up fonts in webkit?

Question

Ever since I added a css transition (first one was on hover, second was an animation) it seems to have messed up my fonts, they look 'different'.

It's totally bizarre, I've looked for hours and can't find anything on it, nor can I figure out exactly why it's happening.

It seems to be ok in firefox, but safari and chrome are having problems.

http://www.simplerweb.co.uk

Everything below the gear animation at the bottom left seems to look like a lighter font weight and the navigation menu seems to look the same.

I am totally lost on this one.

Here's the CSS for the animation.

.gearone {height:100px;
width:100px;
top:-10px;
left:-10px;
position:absolute;
background-position:center;
background-repeat:no-repeat;
background-image:url(../images/gearone.png);
 -webkit-animation-name:             backrotate; 
    -webkit-animation-duration:        13s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-transition-timing-function:linear;


-moz-animation-name: backrotate;
     -moz-animation-duration: 13s;
      -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
}

.geartwo {height:100px;
width:100px;
position:absolute;
background-position:center;
background-repeat:no-repeat;
background-image:url(../images/gearone.png);
top:20px;
left:10px;

 -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         13s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-transition-timing-function:linear;


    -moz-animation-name: rotate;
     -moz-animation-duration: 13s;
      -moz-animation-timing-function:linear;
    -moz-animation-iteration-count: infinite;

}


@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);

  }
  to { 
    -webkit-transform: rotate(360deg);

  }
}

@-moz-keyframes rotate {
from {

    -moz-transform: rotate(0deg);
  }
  to { 

    -moz-transform: rotate(360deg);
  }
}



@-webkit-keyframes backrotate {
    0% {

        -webkit-transform: rotate(360deg);
    }
    100% {

        -webkit-transform: rotate(0deg);
    }
}
@-moz-keyframes backrotate {
    0% {
        -moz-transform: rotate(360deg);

    }
    100% {
        -moz-transform: rotate(0deg);

    }
}

Violet Shreve · Answer 1 · 2013-06-17T20:14:31.563

19

I think I had a similar issue, and what fixed it for me was adding

-webkit-font-smoothing: antialiased;

to my body css. When animation of any kind happens, webkit tries to antialias the text to help with the animation, so adding it to begin with prevents it from changing or looking different.

edited Jun 17 '13 at 20:14

answered Dec 11 '12 at 01:37

Violet Shreve

1,093
7
18

score 5 · Answer 2 · answered Oct 30 '12 at 12:36

i had the same problem. wile the execution of a webkit transition some anchor text became antialiased. after many tries i've found that this happen just in elements that are positioned and have z-index with inside other elements positioned too and with z-index.

#footer {
    bottom: 0;
    left: 330px;
    right: 100px;
    height: 75px;
    background-color: #231f20;
    min-width: 540px;
    min-height: 75px;
    position: fixed;
    z-index: 10;
}

inside the footer i have

#cityNav > ul > li a {
            font-size: 24px;
            text-transform: uppercase;
            position: relative;
            z-index: 110;
            line-height: 24px;
            height: 24px;
            display: block;
        }

and this is my transition

.circle {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        background-color: #ff0000;
        width: 20px;
        height: 20px;
        cursor: pointer;
        text-indent: -999em;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        -webkit-transition: all .2s ease-out; 
        -moz-transition: all .2s ease-out; 
        -o-transition: all .2s ease-out; 
        transition: all .2s ease-out;
    }
    .circle:hover {
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
        -o-transform: scale(2);
        transform: scale(2);
    }

briangervais · Answer 3 · 2014-09-16T18:39:34.373

3

I was having this issue in Chrome for OSX. Using -webkit-backface-visibility: hidden; fixed the problem.

edited Sep 16 '14 at 18:39

answered Sep 16 '14 at 18:33

briangervais

31
4

score 2 · Answer 4 · answered Jul 29 '13 at 10:36

I've faced this issue numerous times and have had success adding the following css to the animated element:

z-index: 60000;
position: relative;

It seems it needs both z-index and position to be effective. In my case I was using it with Font Awesome animated spinners.

score 1 · Answer 5 · edited May 23 '17 at 12:18

1

I'm not exactly sure of the reason why it's happening, but it looks like when your .geartwo element (100px x 100px) overlaps your text, it seems to lighten it. When it rolls off of it, it's back to normal. I too, notice this only in webkit browsers.

To fix it, you can set the gear width and height to 40px (that's the size of the image anyway -- I don't see the need for it to be 100px x 100px), and then re-position it accordingly.

EDIT: I'm not sure that you need to do this after my proposition, but I found this related discussion after a bit of searching.

edited May 23 '17 at 12:18

Community

1
1

answered Apr 19 '12 at 01:24

chrisn

2,095
15
20

+1 for noticing the gears. The overlap is probably what is causing the font anti-alising in that case. – djlumley Apr 19 '12 at 02:10

score 1 · Accepted Answer · edited May 23 '17 at 12:34

1

What you're seeing is webkit anti-alias your text because it's treating it as a texture as opposed to a vector. There's not much you can do, other than not using transformations, or using an text replacement to provide an image instead of your type.

There's a few related threads regarding webkit aliasing, but I haven't personally had much luck keeping the type as type, and still using transformations.

edited May 23 '17 at 12:34

Community

1
1

answered Apr 19 '12 at 02:06

djlumley

2,955
2
24
30

sidenote: compliant, not complient :) – djlumley Apr 19 '12 at 02:08
2

I fixed it by adding -webkit-font-smoothing: subpixel-antialiased; to the parents of any elements that were having the issue. – andy Apr 19 '12 at 11:35

score 1 · Answer 7 · answered Jul 07 '14 at 13:41

1

As stated above, -webkit-font-smoothing: antialiased; works on desktop Safari. But on iOS, you need to use -webkit-backface-visibility: hidden; in order to fix this.

answered Jul 07 '14 at 13:41

Rudloff

119
7

Exactly this resolved the font weirdness for us in Chrome 40. There was another flawed fix with `transform: translateZ(0)` but it kept breaking `position: fixed` so it was a no-go. Thanks man `backface-visibility: hidden` did the job! – Nov 21 '14 at 10:51

NiCk Newman · Answer 8 · 2016-03-03T08:01:04.240

While -webkit-backface-visibility: hidden; is a partial solution; it really ruins the display of your text, especially if you have smoothing / AA enabled. This bug is nasty too, because it happens only when you are using the transform property as well.

After roughly 2 years of sporadically visiting this topic every other month, I found a fix. You need to add a position:relative to the css element that is being animated. There is a catch though, you need to give it a z-index value that is greater than or lower then the element that you see the distortion on. This fixes it 100%.

Since topic doesn't have a 'definite' answer, I hope this answer helps someone who was in the same boat I was in for years.

score -1 · Answer 9 · answered Jan 22 '15 at 15:36

-1

For iOS8, the only way I succeeded in removing the transformation flickers was by adding

body * { -webkit-transform: translate3d(0, 0, 0); }

to my stylesheet.

answered Jan 22 '15 at 15:36

Joost

464
4
5

Strongly advise against this. It makes a GPU layer for every element on the page. Huge memory sink, I think. – aleclarson Nov 20 '17 at 01:49

score -2 · Answer 10 · answered Oct 13 '15 at 10:44

-2

All you need to do is add this CSS rule to any element that you are seeing the flicker on:

 -webkit-transform-style: preserve-3d;

And that's it.

answered Oct 13 '15 at 10:44

Himanshu Saini

702
11
25

CSS3 transition messing up fonts in webkit?

10 Answers10