画面外に絶対配置した要素が表示されてしまう
iOS9におけるSafariなど一部のスマホブラウザでは、画面外に配置した要素が、表示されてしまうバグがあります
こちらの例では、右側にあるモーダルウィンドウは本来画面外にあり、ボタン押下時に画面中央に表示されるという仕組みになっているはずでした。
※ちなみにモーダルウィンドウは絶対座標(position:absoluteを指定)により配置されています。
ところがブラウザのバグにより、モーダルウィンドウの部分まで描画領域が確保されてしまい、表示崩れが起きてしまいました。
そのような場合は、画面外を表示しないような明示的にスタイルを指定すれば解決します。
html, body{ position: relative; width: 100%; overflow-x: hidden; }
これで、意図した表示になります。