[CSS] backdrop-filterを設定する場所に気を付ける backdrop-filterの適用にラグがあるときの改善策

この記事の概要

親要素にtransition: opacityなどを設定していて、backdrop-filterの適用にラグが発生したときの改善策です。

結論：transitionを設定している要素にbackdrop-filterを設定しましょう。

コード例

html

<div class="container">
  <img src="https://.jpg" alt="backdrop-filterがかかる画像" />
  <div class="parent-element">
    <div class="child-element" />
  </div>
</div>

ラグが軽減する書き方

css

.parent-element {
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1em);
  
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7rem;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.3s;
}
.child-element {
  width:100%
  height:100%
}
@media (hover: hover) {
  .parent-element:hover {
    opacity: 1;
  }
}

ラグが発生しやすい書き方

css

.parent-element {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7rem;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.3s;
}
.child-element {
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1em);
  
  width:100%
  height:100%
}
@media (hover: hover) {
  .parent-element:hover {
    opacity: 1;
  }
}

最初はtransitionと同じ要素にbackdrop-filterを設定していても、構造の変更作業により別要素となってしまったときに起きやすいミスかと思います。