CSS3变换-在奇数像素容器上模糊和闪烁问题

Question

CSS3变换-在奇数像素容器上模糊和闪烁问题

cssgoogle-chromecss-transitionscss-transforms

3

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

首先我必须说，是的，我知道可以使用以下方法来解决这个小问题：

-webkit-backface-visibility: hidden;

但是在我的情况下，我无法使其正常工作。

要居中一个容器，我使用以下代码：

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

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

当这个动态容器有奇数像素时，在任何CSS动画中文本都会变得模糊。请看一下这个fiddle：

https://jsfiddle.net/reuse52p/

当我添加backface-visiblity属性时，容器始终模糊不清。您有什么想法，如何解决这个问题？

诚挚地

- Vieper

我已經試了一個多小時那個 JSFiddle，但是一無所獲。在 Firefox 上運作正常。你說得對，只有當 .inner height 和/或 width 設置為奇數時才會發生這種情況。（你是怎麼發現的呢？）非常奇怪。將其記錄為錯誤並發送給 Chrome 的相關人員？至於奇數寬度/高度，如果（是奇數）在 JS 中加上一個？是的，我知道這是一種可怕的黑客行為。 - zipzit

嘿@zipzit，感谢你的时间;-)我为这个问题浪费了一个多小时，是的，还需要一点时间来弄清楚，奇数像素是这个问题的原因;-) 我也考虑过JS hack，但我的问题是.inner height是动态的（它不像在我的示例中通过css设置），这意味着高度在初始化后随时可能会改变。我如何在JS中触发此更改？ - Vieper

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Suresh Karia · Accepted Answer

尝试这段代码。一些css技巧可以去除模糊和闪烁。

将以下属性添加到代码中以去除模糊和闪烁！

-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变换-在奇数像素容器上模糊和闪烁问题

参考资料