Firefoxでスクロールバーを引き起こすtranslateY/X

Question

translateXまたはtranslateYを使用すると、Firefoxのページのレイアウトが影響を受けているように見えます。 CSS仕様では、これらのプロパティがレイアウトに影響してはならないと述べていますが、永続的なスクロールバーが生成されます。

たとえば、http://daneden.me/animateに移動し、「fadeOutRightBig」アニメーションをクリックします。スクロールバーはCSSアニメーションをサポートするすべてのブラウザで生成されますが、Firefoxでは維持されます。これはMozillaや他のブラウザの間違いですか？任意の既知のソリューションですか？

Answer 1

私にバグのように見えます：https://bugzilla.mozilla.org/show_bug.cgi?id=456497それは奇妙なことですが、それは注目を集めていない、かなり私に深刻なようです。

html { 
    overflow-x: hidden; 
} 

それとも、水平方向のスクロールが必要な場合は、親要素の上にそれを適用します。

ソリューションは、あなたが離れてそれで得ることができる場合、html要素の上に水平方向のオーバーフローを隠すだろう。

Answer 2

この問題を解決するための別の方法は、固定位置に切り替えることである。もちろん

#EvilElement { 
    position: fixed; 
} 

が、これは他の副作用を持っているかもしれないが、それはページ全体のために、水平スクロールバーを無効にしません。

Answer 3

Bugzilla issueに対するコメントは良い点です。これはposition: relativeと同じ動作です。元の要素の場所は保持されますが、変換された要素が表示可能なコンテナ（ビューポートまたはスクロール可能な要素）の外側に移動すると、スクロールバーが追加されます。

これは仕様に準拠しており、おそらく "修正されません"。