仅在使用动画时,在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将其视为动画宽度的一部分,并在左侧添加了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>