在Firefox 48中动画CSS缩放时，可怕的，丑陋的模糊

Question

仅在使用动画时，在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会将其视为动画宽度的一部分，并将barfs添加到左侧添加额外的9999px。

Answer 1

我能够通过在我的屏幕阅读器内容上添加overflow：hidden来解决这个问题，但我怀疑这种可视错误可能会在其他地方发生，例如动画非常大的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>