仅在使用动画时,在CSS元素上单独设置scale属性时,我没有这个问题。而且,通常不会发生这种情况。这似乎只发生在我的模态上。

这是我在动画期间拍摄屏幕截图的样子:

css - 在Firefox 48中设置CSS缩放动画时,可怕,丑陋的模糊-LMLPHP



如果我偶然地猜测,我会说这是他们采取的一些性能节省措施,但是我不确定是什么触发了我的模态,以及如何解决它。

这大致是我对模式代码所做的: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将其视为动画宽度的一部分,并在左侧添加了9999px来禁止输入。

最佳答案

我可以通过在屏幕阅读器内容上添加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>

10-07 19:47
查看更多