在 Firefox 48 中动画 CSS 缩放时出现可怕、丑陋的模糊答案

【问题标题】：Horrible, ugly blur when animating CSS scale in Firefox 48在 Firefox 48 中动画 CSS 缩放时出现可怕、丑陋的模糊
【发布时间】：2017-01-21 05:20:45
【问题描述】：

在 CSS 元素上单独设置 scale 属性时，我没有这个问题，只有在使用动画时。而且，一般不会发生。它似乎只发生在我的模式上。

这是我在动画期间截屏时的样子：

糟糕！

如果我随意猜测，我会说这是他们采取的一些性能节省措施，但我不确定是什么特别触发了我的模态以及如何绕过它。

这大致就是我对模态代码所做的事情：https://jsfiddle.net/q85h0esy/

document.getElementById('animateButton').onclick = function() {
	document.getElementById('fadeMe').className = "";
	document.getElementById('scaleMe').className = "";
  setTimeout(function() {
    document.getElementById('fadeMe').className = "fade";
    document.getElementById('scaleMe').className = "scale";
  }, 1);
};

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.fade {
  animation: fadeIn 0.3s linear 0s 1;
}

.scale {
  animation: scaleIn 0.3s linear 0s 1;
}

#fadeMe {
  background: rgba(0,0,0,0.5);
  bottom: 0px;
  left: 0px;
  position: fixed;
  right: 0px;
  top: 0px;
}

#scaleMe {
  background: white;
  border: 1px solid #ccc;
  margin: 1em;
  padding: 2em;
}

#scaleMe .sr-only {
  display: block;
  height: 1px;
  position: absolute;
  text-indent: -99999px;
  width: 1px;
}

#animateButton {
  position: fixed;
  top: 130px;
}

<div id="fadeMe">
  <div id="scaleMe">
    Lorem ipsum dolor
    <div class="sr-only">Screen reader content.</div>
  </div>
</div>
<button id="animateButton">Click for Animation</button>

编辑：演示已更新以显示问题。

在此示例中，框内容变为白色，并且沿边缘有渐变。这是因为我处理仅屏幕阅读器内容的方式，带有负文本缩进。

显然 Firefox 将其视为动画宽度的一部分，并在左侧添加了额外的 9999 像素。

【问题讨论】：

那么，哎呀...您是否可以提供一个实际表现出模糊问题的代码示例？否则，我们大多数人都会沦落到在黑暗中拍摄。
我一直在尝试这样做，但我没有任何运气。源 CSS 长达数千行，因此很难准确找出影响它的因素。我一般问这个问题之前遇到过这个问题的人。
当我删除字体很棒的样式表时问题就消失了。（将其用于模式中的关闭图标）

标签： css firefox animation

【解决方案1】：

我可以通过在我的屏幕阅读器内容中添加溢出：隐藏来解决这个问题，但是我怀疑这个视觉错误可能发生在其他地方，例如在为非常大的 DOM 元素设置动画时。

document.getElementById('animateButton').onclick = function() {
	document.getElementById('fadeMe').className = "";
	document.getElementById('scaleMe').className = "";
  setTimeout(function() {
    document.getElementById('fadeMe').className = "fade";
    document.getElementById('scaleMe').className = "scale";
  }, 1);
};

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.fade {
  animation: fadeIn 0.3s linear 0s 1;
}

.scale {
  animation: scaleIn 0.3s linear 0s 1;
}

#fadeMe {
  background: rgba(0,0,0,0.5);
  bottom: 0px;
  left: 0px;
  position: fixed;
  right: 0px;
  top: 0px;
}

#scaleMe {
  background: white;
  border: 1px solid #ccc;
  margin: 1em;
  padding: 2em;
}

#scaleMe .sr-only {
  display: block;
  height: 1px;
  overflow: hidden;
  position: absolute;
  text-indent: -99999px;
  width: 1px;
}

#animateButton {
  position: fixed;
  top: 130px;
}

<div id="fadeMe">
  <div id="scaleMe">
    Lorem ipsum dolor
    <div class="sr-only">Screen reader content.</div>
  </div>
</div>
<button id="animateButton">Click for Animation</button>

【讨论】：