knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

画面外に絶対配置した要素が表示されてしまう

iOS9におけるSafariなど一部のスマホブラウザでは、画面外に配置した要素が、表示されてしまうバグがあります

f:id:ShinImae:20160606191247j:plain

こちらの例では、右側にあるモーダルウィンドウは本来画面外にあり、ボタン押下時に画面中央に表示されるという仕組みになっているはずでした。

※ちなみにモーダルウィンドウは絶対座標(position:absoluteを指定)により配置されています。

ところがブラウザのバグにより、モーダルウィンドウの部分まで描画領域が確保されてしまい、表示崩れが起きてしまいました。

そのような場合は、画面外を表示しないような明示的にスタイルを指定すれば解決します。

html, body{
  position: relative;
  width: 100%;
  overflow-x: hidden;
}

これで、意図した表示になります。

f:id:ShinImae:20160606191546j:plain