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);
}
}
Deprecated: This feature is no longer recommended.
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.
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.
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):
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.
I was having this issue in Chrome for OSX. Using -webkit-backface-visibility: hidden;
fixed the problem.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With