box-shadow を使うときの注意点

Category : CSS

CSS3 から消えたり復活したりの box-shadow ですが、使ってみると気になる点があったのでメモしておきます。

キャプチャ画像は IE 以外のブラウザ(Windows版)です。
IE9 は入れてないのでどうなるか分かりません。

テスト表示に使ったのは以下。

box-shadow を使うときの注意点 DEMO

親要素に overflow:auto が指定されている場合のスクロールバーの扱い

タイトルだけでは上手く説明できないのですが、overflow:auto が指定された要素の子孫要素に box-shadow が指定されている場合、親要素からはみ出るドロップシャドウ部分をどのように表示するか、ということです。
……コードとキャプチャ画像を見てもらったほうが早いですね。

<div id="outer">
	<div id="shadow1">box-shadow</div>
</div>
#outer {
	padding: 10px 0;
	border: 1px solid #666;
	overflow: auto;
}

#shadow1 {
	box-shadow: 0 0 10px rgba(0, 0, 0, .6);
	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .6);
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .6);
}

重要でない部分は省いていますが、これを各ブラウザで表示すると以下のようになります。

親要素に overflow: auto が指定されている場合のスクロールバーの扱いの比較画像

スクロールバーが出るのが Firefox, Opera で、overflow:hidden 同様になるのが Chrome, Safari です。
このコードでは div の子要素ですが、body の子要素などで発生すると余計なスクロールバーが表示されてしまうので見た目があまりよくないです。
対策としては box-shadow した要素の親要素に overflow:hidden するとかですね。
body の場合はどうしたもんですかね。一番簡単なのは div とかでラッピングすることですが、特に必要ない要素を増やすことになっちゃいますしね……。

box-shadow:insetborder-radius を指定しているときの Google Chrome の表示

これはタイトル通りですね。
box-shadow:insetborder-radius の両方が指定されている場合、Chrome で影の部分がはみでてしまいます。
各ブラウザの比較は次の通り。

box-shadow: inset とborder-radius を指定いているときの比較画像

ちなみに、これのコードはこんな感じです。
境目が分かりやすいように赤いボーダーを指定していますが、なくても同じです。

<div id="shadow2">box-shadow inset &amp; border-radius</div>
#shadow2 {
	box-shadow: inset 0 0 10px rgba(0, 0, 0, .6);
	-moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, .6);
	-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, .6);
	border: 1px solid #f00;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}

ちょっと調べてみたところ、これは結構前からある現象というかバグのようですね。
以下のリンク先に色々書いていました。

こちらを読む限りでは、このバグは Windows と Linux で発生するようです。
Mac では問題なく表示される模様。

これはもう box-shadowinset を指定しないようにするしか対策はないですね。

フォームとかに指定するのに便利なので早く直るといいですねえ。

Windows 版 Chrome 10.0.648.127 で修正されているのを確認しました。
これで一安心ですね。

Leave a Reply