Merge pull request #94 from twin-te/fix/heavy-in-safari

Use `box-shadow` instead of `drop-shadow` to improve rendering performance in Safari.
twin-te · Apr 1, 2023 · c3e0fc5 · c3e0fc5 · vercel · Apr 1, 2023
2 parents e4072d7 + 7b35570
commit c3e0fc5
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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;