Chrome/Safariではtrにbox-shadowが効かない #CSS珍百景
CSS珍百景 Calendar 2014 3日目の記事です。 日をまたいでしまいましたが、書きます。すいません。
今年の9月ごろにChromeとSafariで発現した珍百景です。
Chrome/Safariにおいて、tr要素に対し、box-shadowプロパティを指定した時、それが適用されないというものです。
ちなみに後述しますがFirefoxではちゃんと適用されます。
ということで再現してみた
以下の様なHTMLとCSSでこの現象は再現できます。
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
/*css*/
table {
box-shadow: 0 0 10px black;
padding: 10px;
}
tr {
box-shadow: 0 0 10px red;
}
td {
box-shadow: 0 0 10px blue;
}
至極単純で、それぞれの要素に対して、box-shadowプロパティを適用しています。
DEMO を見る前に、頭のなかで想像してみてください。
このコードはどういった見た目になるでしょうか。
それぞれのブラウザでの結果
ということで、Chrome、Safari、Firefoxでこのデモを見た時のスクリーンショットを載せておきます。 IE？チョットヨクワカラナイ。
Chrome 39ではtdが青く表示されています。赤い影は見る影もありません。
Safari 7.1でもtdが青く表示されています。赤い影は見る影もありません。（気持ち紫っぽいですが気のせいです。）
Firefox 34では、赤い影と青い影が混ざり、紫色になっています。
どれが正解なの？
tr要素に対してbox-shadowプロパティを指定するなんてことするの？と思うかもしれませんが、仕様通りであれば すべての要素に適用することができます。
解決方法
えーと、tr要素を display: block; にすると影がつきます…
でもそれって…うーん…
- Box Shadow on table row not appearing in Chrome
- Table Row Box-Shadow on Hover (Webkit)
- Box Shadow inside TR tag
世の中には悩んでいる人がたくさんいるようです。
まとめ
そもそも、 box-shadow does not display correctly on td when tr has a background color といったバグも報告に上がっていて、tr要素やtd要素に対して、box-shadowプロパティを適用するのは闇なのではと思うのでした。
ああWebkit（Blink）よ、お前だけは信じていたのに。
このカレンダーの日程は こちら から確認できます。