◆ chrome はやっぱり iframe の表示がおかしい
◆ position と top などで全画面にした要素に box-sizing:border-box すると padding サイズがおかしなことに

前は 100% にしたらはみ出るという記事を書きましたが 今回は 100% にしたら下が足りてませんでした

コードはこれだけです
<!doctype html>
<style>
html,body{
width:100%;height:100%;
margin:0;}
div{
position:absolute;
top:0px;left:0px;right:0px;bottom:0px;
background:#f7a;
padding:10px;
box-sizing:border-box;}
iframe{
width:100%;height:100%;
background:#dfb;
border:none;}
</style>

<div><iframe></iframe></div>

div を position:aboslute; にして width と height 使わずに top,left,right,bottom を使って全画面にします
padding を 10px とっておき わかりやすく色を付けてます
その内側に iframe をおいて width と height を 100% にします

普通に考えると div が画面全体にあって 4方向に 10px の隙間があって内側に iframe が来ると思います
ですが実際には 下だけ大きく空間ができてしまいます

この画像の上側が正しい表示で下側がおかしい状態です

iframe-bug-sample


Firefox で開いたり Chrome でも iframe を div などに変えたりすると正しく動くのでバグだと思います


調べてみると原因は box-sizing があることのようです
今回わざと div にだけつけていますが 実際は *{box-sizing:border-box;} と指定して全体に効いてることも多いと思います
div は width と height 使わずにサイズを設定してるので box-sizing をデフォルトにしていても大丈夫です

なぜか Chrome ではこの場合は表示がおかしくなります
今回も前回と一緒で開発者ツールの computed style をみると box-sizing をはずしてもつけても box の大きさは変わってないので表示部分にバグがあるのでしょうけど どうして div などはいけて iframe ではおかしくなるか疑問です


iframe って広告や古いサイトってイメージですが 最近では ロードを挟まずに ajax と history api の組み合わせで ページ遷移は JavaScript で DOM 書き換えだけってことが増えていて メモリリークやページを重くしないためにも 内部で別ページを表示する iframe が有力らしいです
そんなこれからまた活躍しそうな iframe なのに Chrome での扱いが微妙です


サンプルおいときますねー
box-sizing あり
box-sizing なし