animationでfilter:blurを用いると画像の縁が白くなる

前提・実現したいこと

登録した画像が自動的に切り替わるようなスライドショーを作ろうとしています。
スライドショーの要件に以下の2点があります。

画面いっぱいに画像を表示
画像の切替時に、ぼかしつつ、クロスフェーディングさせる

上記の要件を満たすため、CSS3の filter:blur(); と animation を組み合わせて実現しようとしており、Vue.jsの transition の機能を使って、各状態を管理しようと考えました。

発生している問題・エラーメッセージ

chromeのみ、filter:blur(); を適用した際、画像の縁が白くなってしまう現象が起きています。
firefoxでは起こらず、IE11はそもそもblurに対応していないため、画像が切り替わるだけになります。
[追記] 環境によってはfirefoxでも同様の現象が起こるようです。

chromeの場合

firefoxの場合
(当方環境での見え方です、環境によっては白い縁が見えてしまうことがあるようです)

該当のソースコード

遷移中のHTMLとCSSの状態は、以下のようになっています。

html
1<div style="{'background-image': `url(image1)`}" class="full blur-leave-active"/>
2<div style="{'background-image': `url(image2)`}" class="full blur-enter-active"/>

css
1.full {
2  background-position: center;
3  background-size: cover;
4  position: absolute;
5  width: 100%;
6  height: 100%;
7  transform: scale(1.2);
8}
9
10.blur-leave-active {
11  animation: blur-animation-out 4s;
12}
13.blur-enter-active {
14  animation: blur-animation-in 4s;
15}
16
17@keyframes blur-animation-out {
18  0% {
19    filter: blur(0);
20    opacity: 1;
21  }
22  30% {
23    filter: blur(30px);
24    opacity: 0.8;
25  }
26  50% {
27    opacity: 0;
28  }
29}
30
31@keyframes blur-animation-in {
32  0% {
33    filter: blur(30px);
34    opacity: 0;
35  }
36  50% {
37    opacity: 1;
38    filter: blur(30px);
39  }
40  80% {
41    filter: blur(0);
42  }
43}

また、こちらに実際に動作するJSFiddleを置いています。
https://jsfiddle.net/maemaemae3/0v2abhs5/8/

試したこと

試しに、 animation を動作させずに、 filter:blur(); のみをかけたところ、画像の縁が白くなることはありませんでした。

そのため、 animation を行うことが原因の一つになっていると考えられます。

画像を予め scale などを使用して拡大しておけば、縁の白い部分が隠れることで結果的にごまかすことが出来るという情報を見つけ、実践してみましたが、うまく行きませんでした。

画面いっぱいに画像を表示した状態でやっているのが原因かと思い、 margin などを持たせてみましたが、いくら拡大率を上げても、白い縁が見えてしまいます。

補足情報（FW/ツールのバージョンなど）

確認したブラウザのバージョン
google chrome 83.0.4103.106
firefox 77.0.1
Vue.js 2.2.1

どうぞよろしくお願いいたします。

Lhankor_Mhy

2020/07/03 01:57

ご提示のページを当方で確認したところ、Firefox77でしたが、アニメーション中に白いふちを確認できましたのでご報告しておきます。

maemaemae3

2020/07/03 02:19

ご報告ありがとうございます。タイトルと内容の修正を行います。

行動規範の内容に同意します

回答1件

自己解決

極めて強引ですが、chromeの場合のみ backdrop-filter を使用することで解決しました。
ただ、オーバーレイしている要素に対して、 backdrop-filter: blur(XXX) の XXX の数値をアニメーションさせると、今度は縁の部分が白ではなく、ぼかせていない状態になってしまいました。

そのため、予め必要な分ぼかしを入れた要素を opacity: 0 で持っておき、 opacity の値をアニメーションで増減させることで、きれいに全体をぼかしつつクロスフェードすることが出来るようになりました。

css
1.full {
2  background-position: center;
3  background-size: cover;
4  position: absolute;
5  width: 100%;
6  height: 100%;
7  transform: scale(1.2);
8}
9
10.overlay {
11  position: absolute;
12  right: 0;
13  top: 0;
14  height: 100%;
15  width: 100%;
16  opacity: 0;
17  backdrop-filter: blur(30px);
18  &.blur-animation {
19    animation: overlay-blur-animation 4s;
20  }
21}
22
23.blur-leave-active {
24  animation: blur-animation-out 4s;
25}
26.blur-enter-active {
27  animation: blur-animation-in 4s;
28}
29
30@keyframes blur-animation-out {
31  0% {
32    opacity: 1;
33  }
34  30% {
35    opacity: 0.8;
36  }
37  50% {
38    opacity: 0;
39  }
40}
41
42@keyframes blur-animation-in {
43  0% {
44    opacity: 0;
45  }
46  50% {
47    opacity: 1;
48  }
49  80% {
50    filter: blur(0);
51  }
52}
53
54@keyframes overlay-blur-animation {
55  20% {
56    opacity: 1;
57  }
58  70% {
59    opacity: 1;
60  }
61  100% {
62    opacity: 0;
63  }
64}