Firefox でウィンドウリサイズしても 100vw/100vh が更新されない
◆ Firefox 68 (追記: 69 も変わらず)
◆ GoogleFont の CSS をロード (中身は @font-face のみでそのフォントは非使用)
◆ style タグに埋め込むと発生しない
◆ 属性指定なしの iframe を配置
◆ GoogleFont の CSS をロード (中身は @font-face のみでそのフォントは非使用)
◆ style タグに埋め込むと発生しない
◆ 属性指定なしの iframe を配置
以前書いたこれが気になったので詳しく調べてみました
100vw と 100vh を使ってスクロールバーなしでウィンドウ全体に表示するタイプのページがあります
このページを開いてウィンドウサイズを変更するとそれに応じて画面全体がリサイズされるはずです
IE も Chrome もちゃんとそう動いています
ですが Firefox だけリサイズされていません
ウィンドウサイズを拡大したら下や右に白い空白ができますし 縮めたら全体にスクロールバーが出てはみ出た部分は表示されていません
すると GoogleMaps があると発生するようです
DEMO
ヘッダーと地図領域とフッターだけのシンプルなページです
背景を黒色にしてるので 広げると広がった分が白色になって 地図領域は拡大されません
Chrome でみてみると白色部分はなく地図領域が広がります
地図を表示した状態の HTML をまるまるコピーして script を除去した HTML を用意します
これでも再現してるので CSS が原因そうです
徐々にいらない style や 地図表示用の要素を除去していって最終的にこの HTML で再現できました
DEMO
Google Font の CSS と iframe 両方があると発生するようです
iframe はスタイルも src もなしです
ロードしている CSS は @font-face が並んでるだけで そこで定義したフォントは使用していません
また ロードする CSS を直接 style タグに書いた場合は再現しませんでした
それと この現象は Firefox の開発ツールが起動してないときだけ発生します
開発ツールを起動すると それがウィンドウ内でも別ウィンドウでも起動時に再計算されて黒色部分が画面いっぱいになります
またその後はウィンドウリサイズしてもリアルタイムに 100vw/100vh の要素もリサイズされてます
開発ツールを閉じてリロードするとまたリサイズされなくなります
リサイズ後リロードすればページロード時のウィンドウ全体になりますが リサイズのたびにロードもしたくないです
使う側は意識しなくていい方法があればいいのですが 今のところ見つかってません
現象
Chrome や IE では動いてるのに Firefox だけおかしい珍しいことがありました100vw と 100vh を使ってスクロールバーなしでウィンドウ全体に表示するタイプのページがあります
このページを開いてウィンドウサイズを変更するとそれに応じて画面全体がリサイズされるはずです
IE も Chrome もちゃんとそう動いています
ですが Firefox だけリサイズされていません
ウィンドウサイズを拡大したら下や右に白い空白ができますし 縮めたら全体にスクロールバーが出てはみ出た部分は表示されていません
発生条件
いろいろ試しても 100vw と 100vh を使ってるだけだと発生しなかったので 発生したページをコピーして徐々に機能を削ってみましたすると GoogleMaps があると発生するようです
<!doctype html>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-flow: column;
padding: 30px;
background: black;
color: white;
}
header,footer {
flex: none;
background: #444;
}
#map {
flex: 1 1 auto;
}
</style>
<div class="container">
<header>header</header>
<div id="map"></div>
<footer>footer</footer>
</div>
<script>
window.map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 35, lng: 135 },
zoom: 8,
})
</script>
DEMO
ヘッダーと地図領域とフッターだけのシンプルなページです
背景を黒色にしてるので 広げると広がった分が白色になって 地図領域は拡大されません
Chrome でみてみると白色部分はなく地図領域が広がります
もっと詳しく
地図を表示するとこうなるということはわかりましたが 具体的に GoogleMaps のライブラリが追加してる何がこの現象の原因なのか気になるので調べてみました地図を表示した状態の HTML をまるまるコピーして script を除去した HTML を用意します
これでも再現してるので CSS が原因そうです
徐々にいらない style や 地図表示用の要素を除去していって最終的にこの HTML で再現できました
<!doctype html>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Google+Sans">
<style>
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
background: black;
}
</style>
<div class="container">
<iframe></iframe>
</div>
DEMO
Google Font の CSS と iframe 両方があると発生するようです
iframe はスタイルも src もなしです
ロードしている CSS は @font-face が並んでるだけで そこで定義したフォントは使用していません
また ロードする CSS を直接 style タグに書いた場合は再現しませんでした
それと この現象は Firefox の開発ツールが起動してないときだけ発生します
開発ツールを起動すると それがウィンドウ内でも別ウィンドウでも起動時に再計算されて黒色部分が画面いっぱいになります
またその後はウィンドウリサイズしてもリアルタイムに 100vw/100vh の要素もリサイズされてます
開発ツールを閉じてリロードするとまたリサイズされなくなります
対処方法
開発ツールを出せばいいのですが 一般の人が見るページでその対処方法は難しそうですリサイズ後リロードすればページロード時のウィンドウ全体になりますが リサイズのたびにロードもしたくないです
使う側は意識しなくていい方法があればいいのですが 今のところ見つかってません