Studio TA Subsite の案内とお知らせ

Chromeでページの横スクロールバーが消えない

2017年 10月 05日
先ほど気付いたので、最近になって何かが変わった(例えばブラウザの微細なレンダリング仕様の変更とか)のかと思うのだけど、私自身が何か別の所で変更した事の結果というのも大いに有り得るし。 とにかくChromeで見たところ、私のブログページに常に横スクロールバーが着いて、消えなくなっていました。



スクロールバーが消えなくなる(ページの端部が明らかで、本来ならスクロールバーが消えるべきなのに)という状態は、CSSを弄っていると時々遭遇する事です。 解決するのには原因を見つけるのが先決です。 DevToolsで調べて行くと、投稿本文部の「width:100%;」の指定を「99%」にするだけで、横スクロールバーが消えます。 何か、ほんの少しはみ出してる様です。

怪しいのは右側のメニューで、色々弄っているとどうやら原因が見えて来ました。

下図の左側はページの実表示で、右側はDevToolsのウインドウです。 ページのウインドウ下端に問題の横スクロールバーが出ています。

a0349576_00383905.png

右メニューに「box-shadow」(影)を着けていますが、この影をOFFにすると下図の様に、横スクロールバーが消えます。

a0349576_00424646.png

どうも、このあたりに問題がありそうです。 更に調べて行くと、右メニューのウインドウ端との余裕を指定する、下の赤枠の「padding-right:10px;」を「11px」に増すと、やはり横スクロールバーが消えました。

a0349576_00512889.png

横スクロールバーが消えないのは Chromeのみで、IE11、Edge、Firefoxで見た場合は横スクロールバーは出ずに正常です。 結局 Chromeでは、box-shadowがページ幅を越えているという計算になり、横スクロールバーが消えないと考えられます。 余裕を見て、上記のコードで「padding-right: 12px;」に指定して、回避する事にしました。

この問題を長く見落としていたとは考えにくく、暫くネットをウォッチして、関係する仕様変更があったのか調べたいと思っています。



[PR]
# by Ataron2 | 2017-10-05 01:10 | ブログスキンのアレンジ | Trackback | Comments(0)