読者です 読者をやめる 読者になる 読者になる

主に技術的なことを書くブログ

あくまでもデザイナーという方向で技術的なことをメモしていましたが、ざっくばらんに書くことにします。

IEで、position: absolute; left: 50% と translateX(-50%); で、中央に配置している要素の親要素にスクロールバーが出る

IE CSS

IEで、position: absolute; left: 50% と translateX(-50%); で、中央に配置している要素の親要素にスクロールバーが出るというのでハマったのでメモ。

f:id:nakagaw:20160928195444p:plain

こんな感じ。 translateX(-50%); してるのが勘定にはいってないのか、してない体でスクロールバーが出ちゃってるといった様子。

もう、親要素に overflow: hidden; つけてスクロールバー消すしかないかなぁ、と思ったんですが、それだと、意図しないところでスクロールできない!みたいなことがあるので、あんまりやりたくなくて。結局、何が原因なのかなぁ、、といろいろな角度から検索してたらとうとう同じ悩みをもった人が見つかりました。stackoverflow 最高。

stackoverflow.com

まとめると

  • left: 50% と translateX(-50%) 親要素にスクロールバーが出る。
  • right: 50% と translateX(50%) 親要素にスクロールバーが出ない。
  • top: 50% と translateY(-50%) 親要素にスクロールバーが出る。
  • bottom: 50% と translateY(50%) 親要素にスクロールバーが出ない。

どうやら、IE は下と右方向のはみ出しには translate しててもスクロールバーを出す、という仕様っぽい(※ IE10と11でのみ確認)。