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);

    }
}

Solution 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.

Solution 2

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.

Solution 3

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);
    }

Solution 4

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

Solution 5

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.

View more solutions