Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS3 transition messing up fonts in webkit?

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

    }
}
like image 434
andy Avatar asked Apr 18 '12 21:04

andy


People also ask

Should I use WebKit transition?

Deprecated: This feature is no longer recommended.

What is WebKit transition property?

The transition-property property specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes). Tip: A transition effect could typically occur when a user hover over an element.

Should I use transition or animation CSS?

CSS transitions are generally best for simple from-to movements, while CSS animations are for more complex series of movements. It's easy to confuse CSS transitions and animations because they let you do similar things.

Can you add a transition on the font family property?

You can't use animations or transitions with font-family . This means, you actually can do this, but it would change the font-family immediately instead of morphing from one font-family to another. But I found a good workaround for this (here):


2 Answers

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.

like image 166
NiCk Newman Avatar answered Oct 25 '22 09:10

NiCk Newman


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

like image 27
briangervais Avatar answered Oct 25 '22 07:10

briangervais