昨日、follow でこのような効果を見ました。よく見ると、下側の浮層の 2 つの角が底の画像の一部を透かしていました。#
考察#
最初の反応は、角のレンダリングによるピクセル不一致の問題です。
この問題を再現するために例を書いてみました。
しかし、異なるサイズの角と画像を試してみましたが、この問題を再現することはできませんでした。
問題が発生する可能性のあるスタイルを確認してみました。
backdrop-blur を切り替えようとしたとき、この問題が消えたことに気づきました。したがって、問題は backdrop-blur という属性の計算によるものでした。
解決策#
この属性を要素内部に分割してみました。
<div className="absolute bottom-0 w-full text-center rounded-b-sm overflow-hidden duration-500 opacity-0 group-hover:opacity-100">
<div className="z--1 absolute top-0 left-0 size-full bg-white/50 dark:bg-neutral-900/70"></div>
<div className="text-[13px] backdrop-blur-none group-hover:backdrop-blur-sm " >
text
</div>
</div>
全体の要素に遷移アニメーションを適用すると、backdrop-blur の効果は全体のレンダリングが完了した後に行われることがわかります。
そこで、別の方法を試みて、遷移アニメーションを内側の背景要素とぼかし要素に適用します。
<div className="absolute bottom-0 w-full text-center rounded-b-sm overflow-hidden duration-500">
<div className="z--1 absolute top-0 left-0 size-full bg-white/50 dark:bg-neutral-900/70 opacity-0 group-hover:opacity-100"></div>
<div className="text-[13px] backdrop-blur-none group-hover:backdrop-blur-sm opacity-0 group-hover:opacity-100" >
text
</div>
</div>
効果を見てみましょう。