IEで、position: absolute; left: 50% と translateX(-50%); で、中央に配置している要素の親要素にスクロールバーが出る
IEで、position: absolute; left: 50% と translateX(-50%); で、中央に配置している要素の親要素にスクロールバーが出るというのでハマったのでメモ。
こんな感じ。 translateX(-50%); してるのが勘定にはいってないのか、してない体でスクロールバーが出ちゃってるといった様子。
もう、親要素に overflow: hidden; つけてスクロールバー消すしかないかなぁ、と思ったんですが、それだと、意図しないところでスクロールできない！みたいなことがあるので、あんまりやりたくなくて。結局、何が原因なのかなぁ、、といろいろな角度から検索してたらとうとう同じ悩みをもった人が見つかりました。stackoverflow 最高。
まとめると
- left: 50% と translateX(-50%) 親要素にスクロールバーが出る。
- right: 50% と translateX(50%) 親要素にスクロールバーが出ない。
- top: 50% と translateY(-50%) 親要素にスクロールバーが出る。
- bottom: 50% と translateY(50%) 親要素にスクロールバーが出ない。
どうやら、IE は下と右方向のはみ出しには translate しててもスクロールバーを出す、という仕様っぽい（※ IE10と11でのみ確認）。
