Question

我遇到了Firefox的奇怪文字渲染问题。我有一个旋转的div，其中的另一个div使它的不透明度在1到0.5之间迅速变化。这会导致div中的任何文本在每次不透明度变化时呈现不同的颜色 - 某些数字将向上或向下移动一个像素，部分文本将更厚或更窄。

例如，这个：

<div class="outer">
  <div class="glowyWrapper">
    <div class="glowy transparent"></div>
  </div>
  <p class="someText">1 2 3 4 5 6 7 8 9</p>
</div>

使用这些样式：

.outer {
  transform: rotate(1deg);
  width: 300px;
  height: 200px;
}

.glowyWrapper {
  width: 100%;
  height: 10%;
}

.glowy {
  width: 100%;
  height: 100%;
}

.transparent {
  opacity: 0.5;
}

.someText {
  font-size: 60px;
  font-weight: 800;
  text-align: center;
  margin: 10px;
}

添加一些javascript来重复添加和删除＆＃34;透明＆＃34; class会导致渲染问题。

这是一个证明问题的小提琴： https://jsfiddle.net/projectx593/n01m1jop/10/

我找到了一些解决方法，例如降低不透明度变化的速率，或者让它在0.95之间交替，但我不想在可能的情况下调整速度，或者使闪烁的div始终是透明的在某种程度上。有更好的解决方案吗？

我在Firefox 46.0版本中发现了这个问题

Answer 1

由于transform已经存在且-moz-backface-visibility: hidden;无效，您可以使用过滤器强制进行FF渲染计算，这样您也可以治愈边缘上的阶梯效果。

  filter: blur(0.1px);/* note that even 0 as value does it */

https://jsfiddle.net/n01m1jop/14/

旋转和不透明度会导致Firefox中的文本呈现问题

1 个答案: