0
アニメーションを使用する場合にのみ、スケール要素をCSS要素に単独で設定するときにこの問題は発生しません。また、一般的には起こりません。それは私のモーダルでしか起こらないようです。FirefoxでCSSスケールをアニメーション化するときに恐ろしい、醜いぼかしがあります。
これは私がアニメーション中にスクリーンショットを撮るとき、それは次のようになります。
ウエッ！
私は推測に不安がある場合、これはパフォーマンスの節約対策だと言いますが、具体的に私のモーダルとそれを回避する方法について具体的にはわかりません。
これは私がモーダルのコードでやっているおおよそ次のとおりです。https://jsfiddle.net/q85h0esy/
document.getElementById('animateButton').onclick = function() {
\t document.getElementById('fadeMe').className = "";
\t 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>EDIT：デモ、問題を示すように更新。
この例では、ボックスの内容は白くなり、エッジに沿って勾配があります。これは、スクリーンリーダーのみのコンテンツを処理していたため、負のテキストインデントがあるためです。
明らかに、Firefoxはアニメーションの幅の一部としてそれを扱い、余分な9999pxを左側に追加します。
だから、eeeh ...それは可能ですか？さもなければ、私たちの大半は、その暗闇の中での撮影に縮小されます。 – Serlite
私はちょうどそれをやろうとしてきましたが、私は運がありません。ソースCSSは何千もの行になっているので、何が影響を受けているのかを正確に突き止めるのは難しいです。私は以前この問題に遭遇した人々のためにこの質問を一般的に求めています。 – user2867288
フォントのすばらしいスタイルシートを削除すると、問題が解消されます。 （モーダルのクローズアイコンのために使用します） – user2867288