CODEWITHSUNDEEP
cssfirefoxanimation
campari
campari

Reputation: 1005

CSS3: transform flickers on FF

I try to animate a pseudo element width css3. Everything is ok. But on Firefox (43.0.3) at the end of the animation the font flickers:

div {
  width:500px;
  height:500px;
  color:red;
  font-size:100px;
  background:black;
  transform:matrix(1.0001,0.00,0.00,1.0001,0,0);
}
div:before {
  content:"test";
  font-size:100px;
  color:white;
  margin:0 0 0 200px;
  display:block;
  animation:test 2s ease-in-out 1s both;
  transform:matrix(1.0001,0.00,0.00,1.0001,0,0);
}
@keyframes test {
  0% {
    transform:matrix(1.0001,0.00,0.00,1.0001,0,0);
  }
  50% {
    transform:matrix(1.50,0.00,0.00,1.50,0,0);
  }
  100% {
    transform:matrix(1.0001,0.00,0.00,1.0001,0,0);
  }
}
<div></div>

[Edit] I didnt get the point how to link to jsfiddle. so heres the link: jsfiddle.net SLASH focgzeye

Anyone could help?

Upvotes: 1

Views: 70

Answers (1)

Baro
Baro

Reputation: 5520

Try to add line-height same as font-size:

line-height:100px;

Tested on Firefox 43.0.1 but with the same flicker problem.

Here the jsfiddle update.

Upvotes: 1

Related Questions