box-sizingは危険なCSS ／ レイアウトや位置がどうしても意図した通り設定できない場合は、box-sizingを疑う

Bootstrap 3.3.4

Bootstrap をアップデートしたら、jQuery offsetメソッドで取得される値が変更
・それまで整数で返ってきていた戻り値が、ある日いきなり小数点で返ってくるようになる

原因を特定できない
・ブラウザの問題？
・jQueryの問題？
※原因を想定すら出来ず、苦しむ

---

犯人はbox-sizing

調査した結果、判明した事実
・bootstrap.cssに記述されていた 下記box-sizingによる影響を受けていた

* {

  -webkit-box-sizing: border-box;

     -moz-box-sizing: border-box;

          box-sizing: border-box;

}

具体的には、下記組み合わせの場合において取得値が変更される可能性がある
・box-sizing: border-box;
・SVG viewBox
・border
※いや、普通は分からないでしょう、そんなの


・box-sizing: border-box;

天地左右中央に配置できない

display: table-cell;指定しているのに位置が微妙にズレる
・もしかして、perspectiveだから？
→ 関係なかった

---

犯人はbox-sizing

bootstrap.cssに記述されていた 下記box-sizingによる影響を受けていた

* {

  -webkit-box-sizing: border-box;

     -moz-box-sizing: border-box;

          box-sizing: border-box;

}

---

対応

初期値で上書き

* {

    box-sizing: content-box;

}

※ライブラリCSSは極力変更しない、という方針に基づき


・floating 3D objects using nested transformations (with preserve-3d)

絶賛の嵐

タイトルだけを読めば、導入すれば全てが解決するようにもとれる

---

ネット情報に反論

魔法のプロパティではない
・「ボックスサイズの算出方法」を変更する危険(影響度が大き)なCSSプロパティ
・ある一面だけ見れば魔法のように便利な側面があるかもしれないが、それはあくまでも全体の一部分でしかない

borderやpaddingの数値を気にする必要はある
・従来とは計算方法を変更するだけ
・borderやpaddingの概念や数値が、レイアウトの世界から実際に消えてなくなるわけではない
・つまり、裏では、それに伴う処理が発生している
・単純な例では自動で対応する(？)ようだが、複雑な場合(SVG viewBox × border など)は手動で対応する必要が生じてくる

Bootstrap読込

吹き出し位置がズレる

原因
▼bootstrap.min.css

*, ::after, ::before {

    -webkit-box-sizing: inherit;

    box-sizing: inherit;

}

対応
・既存CSSを修正することなく、後から読込むことで上書き

/*既存CSS競合対策*/

*, ::after, ::before{

    box-sizing: content-box;

}