サイトの新しいページをhttp://ichiso.net/tml/にアップロードした後、パソコンとスマートフォン(Android)で確認を行ったわけですが、ここでちょっと困ったことになってしまいました。まずはこちらをご覧ください。(すべてAndroidのスクリーンショットです)

この画像は、Firefoxでトップページを表示させたときのものです。ページ上端に4色の帯がありますが、これはSVGで作成した背景です。CSSのmarginによって、その帯かそれ以上の幅だけ文字を下げています。こうすれば、最初に表示したときに帯と文字が重ならなくなります。(スクロールすれば重なります)

では、ページの高さが変わればどうでしょう。ご覧の通り、帯の幅は変わりません。これは、ブラウザの画面の高さを100%とし、それに対する割合(ここでは5%)を帯の幅としたためです。どんなページを閲覧しようとも、ブラウザの画面の高さは変わらないので、この帯の幅も不変のはずです。

ところが、Google Chromeではそうはいきませんでした。

同じトップページです。ブラウザの画面の高さはFirefoxと変わらないにもかかわらず、帯の幅が大きくなっています。

ページが長くなると、帯がぐんと大きくなります。このことから、Google Chromeに関しては”ブラウザの画面の高さ”が100%になるのではなく、”ページの高さ”を100%として計算してしまっているということが分かります。

Chromeの表示では明らかに帯と文字が重なっていますが、現時点では単位を変更したり、背景の表示をやめたりするといったことは考えていません。Firefoxのほうが正しい表示だと思うので、どうにかChromeに修正がかかることを祈るだけです…