はじめに

こんにちは、うめちゃんです。
先日、好きなサイトの閲覧履歴を作成できる拡張機能、Custome Browsing Historyをリリースしました。

リリース後にユーザー様から指摘いただいた謎の挙動に悩まされたのでその内容を共有します。

ポップアップが指定のサイズにならない

Chrome拡張機能の縦横の最大サイズは800px600pxと決まっています。
私の拡張機能ではこれを最大限利用したいと思いbodyのwidthに800px, heightに600pxを指定していました。
このサイズのポップアップでスクロールしないようにコンテンツを配置するようにしています。

しかし、あるユーザー様からこのような指摘をいただきました。
「コンテンツがポップアップ外にはみ出して見づらい」
私の環境では正常に表示されているのですが、こちらのユーザー様の環境ではどうやらそうではないらしいのです。
試しにデベロッパーツールを使ってポップアップのサイズが幾つになっているのか確認していただきました。
すると、bodyは指定通りwidth:800px, height:600pxだったのですが、htmlがwidth:640px, height:600pxとポップアップの最大サイズになっていなかったのです。

何故、このユーザー様の環境だけこのようなサイズで表示されたのでしょうか。
手元で再現できないため、ユーザー様に色々と環境周りをヒアリングしていきました。
その結果、、、

Chromeのズーム設定が原因と判明

なんと、Chormeの設定画面で変更できるズーム設定の値をユーザー様は125%にしており、これが原因でコンテンツがポップアップ外にはみ出ていることが分かりました。
どういうことか、図で説明します。

今回は説明を簡略化するために、ズーム設定を200%に設定した例で説明します。
まず、下記の図は拡張機能のポップアップのサイズを表しています。

このポップアップをChromeのズーム設定100%で表示した場合はこのようになります。
100%なのでポップアップのサイズ通りにコンテンツが表示されます。

これをズーム設定200%にするとどうなるか。
答えは下記の図のようになります。

ズーム設定を200%にすると、ポップアップの表示可能領域が元のサイズの1/2になります。
1/2のサイズの中に元のサイズ800px*600pxを表示しようとするため、コンテンツがポップアップ外にはみ出ることになります。

対策

これを回避するには、コンテンツ幅をサイズ指定ではなく比率で設定する必要があります。
比率で指定することで、表示領域の変化に合わせて柔軟にコンテンツ幅を変えることができます。