Chromeで開発者ツールを開いているとき、なぜかレイアウトが崩れるバグに悩まされていたが、その原因がブラウザの拡大率とiframeの関係だったのでメモに残す。
まず、以下の条件のとき、ブラウザの拡大率は無視される
- Chromeで開発者ツールを開いている
- device toolbar を開いている
- Device typeを
mobileにしている
しかし、iframeの中に限っては上記の条件でも拡大率が影響する
見た方が早いと思うので、次の画像を見て欲しい
| 拡大率100% | 拡大率200% |
|---|---|
| 通常の拡大率の表示 | 上記条件を満たしたときの拡大率200%の表示 |
 |
 |
右の200%にした場合の画像を見ると、タイトルの <iframe>:インラインフレーム要素 などは拡大しておらずそのままで HTML Demo: <iframe> とあるiframeの中だけ200%に拡大している。
以下のような表示であればPCとMobileで表示に差異はでないため問題ないのだが
- PC版表示： 全て200%表示
- Mobile版表示: 全て100%表示
実際には以下のようになる
- PC版表示： 全て200%表示
- Mobile版表示: 基本100%表示だが、iframe内のみ200%表示
そのため、PC版とMobile版で表示が異なってしまい、iframe内だけバグっているように見える。
これが原因で3時間ほど溶かしたので気をつけていきたい...
気づけなかった原因としては
プロジェクトA（localhost:3000）を立ち上げて拡大してみていたあと、
プロジェクトB（localhost:3000）を立ち上げて普通にみて、
プロジェクトAで拡大していたのを忘れていたためである。
つらい。