CSS3 转换 - 模糊和闪烁问题 - 在具有奇数像素的容器上

Question

我在 Chrome 中使用 CSS 动画时遇到模糊和闪烁问题。

首先我必须说，是的，我知道使用的小修复:

-webkit-backface-visibility: hidden;

但就我而言，我没有让它工作。

使用以下代码将容器 Im 居中:

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

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

当这个动态容器有奇数像素时，文本是模糊的，而任何 css 动画。看看这个 fiddle :

https://jsfiddle.net/reuse52p/

当我添加背面可见性时，容器始终是模糊的。你有什么想法，我该如何解决这个问题？

真诚的

Answer 1

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

Add this properties to remove blur and flickering!

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

引用

• WebKit: Blurry text with css scale + translate3d
• Blurry text after using CSS transform: scale(); in Chrome