Question

我在Chrome中使用css动画时出现模糊和闪烁问题。

首先我要说，是的，我知道使用的小修补：

-webkit-backface-visibility: hidden;

但就我而言，我不能让它发挥作用。

使用以下代码对容器进行居中：

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

此DIV的宽度和高度是动态的。现在问题是：

当此动态容器具有奇数Pixel时，文本在任何css动画时都会模糊。看看这个小提琴：

https://jsfiddle.net/reuse52p/

当我添加背面可见性时，容器整个时间都是模糊的。你有任何想法，我如何解决这个问题？

此致

Answer 1

试试这段代码。一些css hack会消除模糊和闪烁。

添加此属性以消除模糊和闪烁！

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

参见下面的演示

$(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>

CSS3变换 - 模糊和闪烁问题 - 关于具有奇数像素的容器

1 个答案:

参见下面的演示

参考