From 7b35570af58e1386238b9dfbd027c87f8a8875f8 Mon Sep 17 00:00:00 2001
From: HosokawaR <thin.river.jp@gmail.com>
Date: Fri, 31 Mar 2023 22:59:06 +0900
Subject: [PATCH]  Use `box-shadow` instead of `drop-shadow` to  improve
 rendering performance in Safari.

---
 src/components/organisms/Feature.vue | 10 +++++-----
 src/scss/_mixin.scss                 | 12 ++++++++++++
 src/scss/_variable.scss              |  9 ---------
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/organisms/Feature.vue b/src/components/organisms/Feature.vue
index 4c2a8b7..faa921a 100644
--- a/src/components/organisms/Feature.vue
+++ b/src/components/organisms/Feature.vue
@@ -260,13 +260,13 @@ export default defineComponent({
     top: 50px;
     left: 0;
     width: 160px;
-    filter: $shadow-screen-base;
+    @include box-shadow-screen-base;
   }
   #timetable-2 {
     right: 0;
     top: 115px;
     width: 160px;
-    filter: $shadow-screen-base;
+    @include box-shadow-screen-base;
   }
   #add-1 {
     top: -10px;
@@ -294,7 +294,7 @@ export default defineComponent({
     right: 50%;
     transform: translateX(50%);
     width: 190px;
-    filter: $shadow-screen-base;
+    @include box-shadow-screen-base;
   }
 
   // tabletレイアウトでの画像配置
@@ -383,14 +383,14 @@ export default defineComponent({
       display: block;
       position: relative;
       width: 252px;
-      filter: $shadow-screen-base;
+      @include box-shadow-screen-base;
     }
     #detail-2 {
       display: block;
       bottom: 0px;
       left: 0;
       width: 252px;
-      filter: $shadow-screen-base;
+      @include box-shadow-screen-base;
     }
     #detail-3 {
       bottom: 0px;
diff --git a/src/scss/_mixin.scss b/src/scss/_mixin.scss
index 56ba4b1..b19404c 100644
--- a/src/scss/_mixin.scss
+++ b/src/scss/_mixin.scss
@@ -114,3 +114,15 @@
     @content;
   }
 }
+
+// Shadow
+// filter の drop-shadow は Safari でのパフォーマンスが著しく低下するため box-shadow で代用
+@mixin box-shadow-screen-base {
+  box-shadow: -20.49px -20.49px 50.95px rgba(175, 190, 198, 0.1),
+    48.888px 48.888px 83.808px rgba(194, 203, 207, 0.25);
+}
+
+@mixin box-shadow-screen-primary {
+  box-shadow: -14.28px -14.28px 42.84px rgba(67, 179, 186, 0.25),
+    64.26px 64.26px 85.68px rgba(67, 179, 186, 0.3);
+}
diff --git a/src/scss/_variable.scss b/src/scss/_variable.scss
index 058eb4d..b88f15d 100644
--- a/src/scss/_variable.scss
+++ b/src/scss/_variable.scss
@@ -21,15 +21,6 @@ $yellow-orange-light: #fdd17b;
 /* Effect styles */
 $shadow-base: 0.2rem 0.4rem 1rem #a5bac74d, -0.1rem -0.1rem 0.2rem #ffffffb3,
   inset -0.6rem -0.8rem 1.2rem #ffffff73, inset 0.2rem 0.3rem 0.4rem #cbd5df66;
-// ↓filterプロパティに使う
-$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));
 
 // font-size(アイコンフォントには使わなくて良い)
 $font-minimum: 1rem;