Safari で表示したときにページの描画処理が重い

[takonasu]

ページの読み込みに時間がかかる

[HosokawaR]

Safari だけ症状が深刻。

ScrollReveralが原因ではと疑っている。
しかし #83 すればもろもろが早くなるかもしれない

[HosokawaR]

ScrollReveralが原因ではない模様。
アニメーションを無効にしても Safari で重い。

[HosokawaR]

読み込みが遅いというよりは、処理が重すぎて要素の遅延表示処理が間に合っていないがために、読み込みが遅く見える模様。
処理の重さは CSS の filter が原因の可能性が高いが、不明。現在調査中。

[appare45]

この件について調査しました
遅延が発生しているのは Featureコンポーネントの画像処理が原因になっています。

具体的には、 filter: $shadow-screen-base;　が適用されている画像の描画で遅延が発生しています。
これはSafariのdrop-shadowの処理にバグがあるためと思われます。
mdn/browser-compat-data#17726

このissueでも言及されていますが、Safariでdrop-shadowを適用するとスタイルの再計算が何度も発生しパフォーマンスが低下します。
また、適用されるdrop-shadow自体も本来の描画と異なることがあります。
drop-shadowと同様のCSSプロパティーである、box-shadowでは同様の事象は発生しません。
次の画像は左側がdrop-shadowを用いた場合、右側がbox-shadow（影1つのみ）を用いた場合を示します。

Safari

ただし、box-shadowを用いる場合、画像の透過を反映できないので、border-radiusで対応することになります。
また、現状$shadow-screen-base;では複数のdrop-shadowが適用されていますが、このようなことはbox-shadowではできません。

twinte-landing-page/src/scss/_variable.scss

Lines 25 to 32 in e4072d7

	$shadow-screen-base: drop-shadow(
	-20.49px -20.49px 50.95px rgba(175, 190, 198, 0.1)
	)
	drop-shadow(48.888px 48.888px 83.808px rgba(194, 203, 207, 0.25));
	$shadow-screen-primary: drop-shadow(
	-14.28px -14.28px 42.84px rgba(67, 179, 186, 0.25)
	)
	drop-shadow(64.26px 64.26px 85.68px rgba(67, 179, 186, 0.3));

解決策としては

1. 何もせず、Safariは諦める
2. 影を簡素化し、box-shadowで描画する
3. 画像の下に、何枚かレイヤーを敷きそこにbox-shadowを提供して、drop-shadowと同じ効果を得る

などが考えられます。

[takonasu]

ご報告ありがとうございます！
Twin:teチームとしては、drop-shadowのような影を含めて画像化する方向での解決ができないか検討を進めています。
iPhoneのユーザが多いことから、どうしてもSafariを切り落とすことができないため、ご提案いただいた解決策を含めて最適化できないか試してみます。

関連PR #92

[HosokawaR]

ありがとうございます！

画像の下に、何枚かレイヤーを敷きそこにbox-shadowを提供して、drop-shadowと同じ効果を得る

もいいですね〜
画像に影まで含めると、画像サイズの巨大化や、モバイル端末で影を見切れるデザインにしたいときとかに苦労ポイントがありそうなので、こちらのほうがシンプルかもしれません。
画像の透過が反映されないというデメリットはありますが、今回のデザインではそこまであまり気にならないとも考えました。

両方の案で検討したいと思います！

[HosokawaR]

重すぎて早く直したいとのことで HotFix 的な対応をした
#94

しかし完全ではないので後々修正したい