translateXを使うと、IEで横スクロールバーが表示されてしまう問題

IEがついにサポート終了ということでその界隈は賑わってますね。

Internet Explorer は Microsoft Edge へ – Windows 10 の Internet Explorer 11 デスクトップアプリは 2022 年 6 月 15 日にサポート終了 - Windows Blog for Japan

※ 本ブログは、米国時間 5 月 19 日に公開された “The future of Internet Explorer on Windows 10 is in Microsoft Edge” の抄訳です。 ご存じのとおり、マイクロソフトでは、昨年より Internet Explorer のサポートを徐々に縮小しており...

blogs.windows.com

そんな中、IEエラーでひとりてんやわんやしてました、maiです。

translateXを使うと、IEで横スクロールバーが表示されてしまう問題

画像と文字を重ねたり、背景からはみ出すように要素を配置するときに
translateXを使っているのですが、
IEだと謎の横スクロールバーが表示されてしまう（事がある）んです…！

chromeやfirefox、edgeでは普通に表示されていたのにー！

知らなかったのでテンパりました…笑

やっとの思いで見つけ出した解決策がこちら。

bodyにoverflow-x: hiddenを指定する

overflow-x: hidden

これで横スクロールバーが表示されなくなりました。

もちろん他ブラウザでの表示も問題なしです。よかった～！

IEに振り回される日々は続く…

サポート終了とはいいつつも当分はIEの事も考えてコードを書く日々が続くので、
忘れないようにメモメモ。

もし同じようにテンパっておられる方がいらっしゃいましたら、お役に立てれば幸いです。