3

I have a problem with Blurring and Flickering while css animation in Chrome.

First I have to say, yes i know the small Fix using:

-webkit-backface-visibility: hidden;

But in my case, I dont get it to work.

To Center a Container Im using following code:

position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

The Width and the Height of this DIV is dynamic. Now the problem:

When this dynamic container has odd-numbered Pixel the text is blurry while any css animation. Just have a look at this fiddle:

https://jsfiddle.net/reuse52p/

When Im adding backface-visiblity, the container is the whole time blurry. Do you have any ideas, how I can fix this?

Sincerely

Vieper
  • 87
  • 8
  • I've been playing with that JSFiddle for over an hour, and I'm nowhere. Works fine on Firefox. And you are right, it only happens when the .inner height and/or width is set to an odd number. (How did you figure that out?) Very strange. Write it up as a bug and send it to the Chrome folks? And as for odd width / height, if (odd) add one in JS? Yes, I know its a terrible hack. – zipzit Mar 24 '15 at 21:13
  • Hey @zipzit, thank you for your time ;-) I lost more than 1 hour for this issue, and yes it also needs a liitle bit of time to figure out, that the odd numbered pixel is the reason for this issue ;-) I also thought about a JS hack, but my problem is, that the .inner height is dynamic (its not set via css like in my example), that means that the height could change over time after initialising. How can I trigger this change ins JS? – Vieper Mar 25 '15 at 14:14

1 Answers1

3

Try this code. some css hack will remove blur and flickering from it.

Add this properties to remove blur and flickering!

-webkit-perspective: 1000;
  -webkit-font-smoothing: subpixel-antialiased;
  backface-visibility: hidden;
  transform: translateZ(0);

See demo below

$(document).ready(function() {
  $(".anim").click(function() {
    $(this).toggleClass("bigger");
  });
});
.outer {
  position: relative;
  height: 500px;
  width: 500px;
  background: #ccc;
  -webkit-perspective: 1000;
  -webkit-font-smoothing: subpixel-antialiased;
}
.inner {
  position: absolute;
  width: 300px;
  height: 300px;
  background: #e5e5e5;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -150px;
}
.anim {
  width: 100px;
  height: 50px;
  background: #fff;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -25px;
  -webkit-transition: -webkit-transform 1s ease;
  -moz-transition: -moz-transform 1s ease;
  -o-transition: -o-transform 1s ease;
  transition: transform 1s ease;
  -webkit-perspective: 1000;
  -webkit-font-smoothing: subpixel-antialiased;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.bigger {
  transform: scale(2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="outer">
  <div class="inner">
    <h2>Flickering!</h2>

    <div class="anim">Click me</div>
  </div>
</div>

Reference

Community
  • 1
  • 1
Suresh Karia
  • 17,550
  • 18
  • 67
  • 85
  • Hey @Eirenaios, thanks for your awnser. In your demo you are using minus pixel for margin left and top to center the div, so you dont use transform: translate(-50%, -50%); anymore, which causes the problem with flickering. In my case I cant use a specific negative margin pixel to center the container, because I dont know how big the div will be. Thats why Im using transform: translate(-50%, -50%); because it doesnt matter how big the div is... Sadly this hack does not solve my problem. – Vieper Apr 07 '15 at 08:44