iOSのSafariでのサイト表示時に、bodyにoverflow-x:hidden;を指定してもCSSが効かずに表示領域（ウィンドウ）の幅を超えて横スクロールができてしまう時の対処方法になります。

先日、スマートフォン用に横からスライドさせて表示させるメニューを作成したのですが、bodyに指定したoverflow-x:hidden;が効かずに、表示領域外に配置しているスライド前のボックスが表示領域の幅を超えて横スクロールで表示できてしまう状況に遭遇しました。

PCでの表示は問題なくCSSが効いているので、一部のスマートフォンブラウザもしくは旧バージョンのSafariにて発生するものではないかと思います。

また、過去に制作したものでは、overflow-x:hidden;の指定のみで問題なく効いていたので、要素の配置の仕方によっても効かない場合はあるようです。

overflow-x:hidden;が効かない時は、position: relative;を追加してみる

全ての状況において有効な方法であるかは未検証ですが、PCのブラウザではちゃんと動作しているのに、iOSのSafariでは横スクロールができてしまうといった場合には、overflow-x:hidden;を指定しているbodyに、position: relative;を追加することで対応できると思います。

CSS

body{
	position: relative;
	overflow-x: hidden;
}

以上、「CSS：iOSのSafariで overflow-x:hidden; が効かなかった時の対処方法」でした。