【CSS】translateXを使ったときに、IEで表示すると水平スクロールバーが表示されてしまう問題への対処法

画像とテキストを重ねて中央寄せするときなどに、translateXが便利でよく使っているのですが、IEだと水平スクロールバーが表示されてしまう事があります。

以下のサンプル(もしくはこのページ)をIEで表示するとサンプルデモの結果表示の下部に水平スクロールバーが表示されてしまいます。(Firefox, Chromeで表示した場合は問題なく表示されていると思います。)

See the Pen translateX by m (@m3816) on CodePen.

この場合の対処法は、以下の通り。

See the Pen translateX with overflow-x: hidden by m (@m3816) on CodePen.

bodyにoverflow-x: hiddenを指定することで水平スクロールバーが表示されなくなります。