Javascript 旋转和不透明度会导致Firefox中出现文本渲染问题

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

添加一点javascript以重复添加和删除“透明”类将导致呈现问题

下面是一把小提琴，展示了这个问题：

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

---

我在Firefox 46.0版中发现了这个问题，因为

transform

已经存在，并且

-moz backface visibility:hidden无用您可以使用过滤器强制FF渲染计算，因此还可以修复边缘上的楼梯效果

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

如果将间隔延迟设置为500ms或更大，则不会出现此错误。如前所述，短过渡可以避免此错误，一点阴影也可以平滑边缘或/12/+过滤器（你能列出Firefox版本吗？因为这在33.Done中没有发生。我注意到我的Firefox已经过时，更新到46.0.1后问题仍然存在
  filter: blur(0.1px);/* note that even 0 as value does it */