プログラミング備忘録

忘れない様にメモ

*

フルスクリーン仕様なのにie11で横スクロールバーが出てしまった

      2017/02/18

フルスクリーン仕様にしたCSSなのにie11だけ横スクロールバーが出てしまった件。

疑わしい要素を一個づつ削除して調べていくと原因は

position:absolue;
left:50%
width:70%

と設定しているブロックだと特定出来た。

いわゆる真ん中寄せの設定がしてある。

実際はさらに

transform: translateY(-50%) translateX(-50%)

↑これとtopの指定がしてある。

ここまで子ボックスの設定。

親ボックスはwidth:100%

子ボックスはleft:50%なので親ボックスのX軸の中心に左端が位置している。

図1

ie_bug01

これだと横スクロールバーが出ても納得だよね。

親ボックスとブラウザは横幅一緒なのでそれよりも右端に飛びだしてる要素(子ボックス)があるから横スクロールバーが出る。

でも子ボックスにはtranslateの設定があるから

transform: translateY(-50%) translateX(-50%)

図2
ie_bug02

こういう風に子ボックスのwidthの-50%だけ(左方向へ)戻して真ん中寄せになってる。

ie以外はこれで問題ないんだけど、ieではtranslateの設定は見かけ上の事だけであって実体は

図1のまんまだと認識しているらしい。(個人的見解です。)

なので横スクロールバーが出る。

試しに親ボックスにoverflow:hiddenを設定すると横スクロールバーは出ない。

まぁ解決でいいか。

すっきりしないけどまた何かわかったら加筆します。

この記事は役に立ちましたか? はい いいえ 0人中0人が役に立ったと言っています。

 - CSS