サンプルのトップに戻る
影の闇 - トラブルと回避策
※これらのサンプルは2020/3/25時点のChrome, Safari, Firefoxで表示を確認しています。不具合やブラウザの制限はバージョンで変わる可能性があるため、最新の環境でご確認ください
影のアニメーションがなんとなくカクカクする（Safari）
NG: Shadowのサイズを動的にアニメーションするとガタつきが目立つ（特にSafari）
OK: サイズではなく透明度を動的に変えた方が滑らかに見える
hoverで影を出したら周辺が欠ける（Safari）
NG: hoverで影を大きくすると切れる
OK: paddingつけた親要素に影をつければ回避可能
アニメーション中に影が消える（Safari）
NG: 複数のdrop-shadowを適用
OK: 一つだけならOK