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

【问题标题】：CSS3 Transform - Blurring and Flickering Issue - on Container with odd-numbered PixelCSS3 变换 - 模糊和闪烁问题 - 在具有奇数像素的容器上
【发布时间】：2015-05-28 00:14:12
【问题描述】：

Chrome 中的 css 动画出现模糊和闪烁的问题。

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

-webkit-backface-visibility: hidden;

但就我而言，我无法让它工作。

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

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

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

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

https://jsfiddle.net/reuse52p/

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

真诚的

【问题讨论】：

我已经用那个 JSFiddle 玩了一个多小时，但我无处可去。在 Firefox 上运行良好。你是对的，它只发生在 .inner 高度和/或宽度设置为奇数时。（你是怎么想出来的？）很奇怪。把它写成一个 bug 并发送给 Chrome 的人？而对于奇数宽/高，如果（奇数）在JS中加一？是的，我知道这是一个可怕的黑客攻击。
嘿@zipzit，谢谢您的宝贵时间；-) 我为这个问题浪费了 1 个多小时，是的，它还需要一点时间来弄清楚，奇数像素是这个问题的原因;-) 我也想过一个 JS hack，但我的问题是，.inner 高度是动态的（它不是像我的例子那样通过 css 设置），这意味着高度可能会随着时间的推移而改变初始化。如何在 JS 中触发此更改？

标签： css google-chrome css-transitions css-transforms

【解决方案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>

参考

【讨论】：

嘿@Eirenaios，感谢您的遮阳篷。在您的演示中，您使用负像素作为左边距和顶部以使 div 居中，因此您不使用 transform: translate(-50%, -50%);不再，这会导致闪烁的问题。在我的情况下，我不能使用特定的负边距像素来使容器居中，因为我不知道 div 会有多大。这就是我使用变换的原因： translate(-50%, -50%);因为 div 有多大并不重要......遗憾的是，这个 hack 并没有解决我的问题。