From 68c19255315cdee191a2bf59a19ed2de0397376d Mon Sep 17 00:00:00 2001 From: Braden Wiggins Date: Sat, 19 Oct 2024 16:13:39 -0400 Subject: [PATCH 1/3] fix: testemonial images on safari - changed `filter: drop-shadow` to `box-shadow` - added a subtly larger shadow to the hover transition - moved the shadow from the `a` to the `img` and removed `overflow: hidden` from `a` - changed `filter: none` to `filter: grayscale(0)` to fix the transition on safari `overflow: hidden` caused safari to clip the shadows regardless of whether they were defined on the `a` or `img` tag for both `drop` and `box` shadows. --- .../svelte.dev/src/routes/_home/Testimonials.svelte | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/apps/svelte.dev/src/routes/_home/Testimonials.svelte b/apps/svelte.dev/src/routes/_home/Testimonials.svelte index e40fd0bc82..0c5d643d31 100644 --- a/apps/svelte.dev/src/routes/_home/Testimonials.svelte +++ b/apps/svelte.dev/src/routes/_home/Testimonials.svelte @@ -72,10 +72,9 @@ display: block; width: 100%; top: 0; - filter: drop-shadow(0.2rem 0.4rem 2rem rgb(0 0 0 / 0.3)); - overflow: hidden; + overflow: visible; transition: 0.2s; - transition-property: scale, filter; + transition-property: scale; &:nth-child(1) { top: 0%; @@ -108,9 +107,15 @@ object-fit: contain; border-radius: var(--sk-border-radius); filter: grayscale(1); + transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); + box-shadow: 0.2rem 0rem 2rem rgb(0 0 0 / 0.25); + transition: 0.2s; + transition-property: filter, box-shadow; + a:hover & { - filter: none; + filter: grayscale(0); + box-shadow: 0.2rem 0rem 4rem rgb(0 0 0 / 0.2); } } } From e4689438e764d370a6f74896c8de44da40055652 Mon Sep 17 00:00:00 2001 From: Braden Wiggins Date: Sat, 19 Oct 2024 18:32:06 -0400 Subject: [PATCH 2/3] fix: back to drop-shadow filter Turns out `transfrom: translate3d(0,0,0)` was already there, but moving it from the `img` to the `a` tag did the trick! --- .../src/routes/_home/Testimonials.svelte | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/apps/svelte.dev/src/routes/_home/Testimonials.svelte b/apps/svelte.dev/src/routes/_home/Testimonials.svelte index 0c5d643d31..961c35139c 100644 --- a/apps/svelte.dev/src/routes/_home/Testimonials.svelte +++ b/apps/svelte.dev/src/routes/_home/Testimonials.svelte @@ -72,9 +72,11 @@ display: block; width: 100%; top: 0; - overflow: visible; - transition: 0.2s; - transition-property: scale; + overflow: hidden; + filter: drop-shadow(0.2rem 0.4rem 2rem rgb(0 0 0 / 0.3)); + transform: translate3d(0, 0, 0); + transition-property: filter, scale; + transition-duration: 0.2s; &:nth-child(1) { top: 0%; @@ -98,6 +100,7 @@ &:hover { scale: 1.05; + filter: drop-shadow(0.2rem 0rem 4rem rgb(0 0 0 / 0.3)); } } @@ -107,15 +110,10 @@ object-fit: contain; border-radius: var(--sk-border-radius); filter: grayscale(1); - transform: translate3d(0, 0, 0); - -webkit-transform: translate3d(0, 0, 0); - box-shadow: 0.2rem 0rem 2rem rgb(0 0 0 / 0.25); - transition: 0.2s; - transition-property: filter, box-shadow; - + transition: filter 0.2s; + a:hover & { filter: grayscale(0); - box-shadow: 0.2rem 0rem 4rem rgb(0 0 0 / 0.2); } } } From 979248836ecfb04f3720289a7b99af6d8698135c Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 19 Oct 2024 20:55:36 -0400 Subject: [PATCH 3/3] turn it down just a smidge --- apps/svelte.dev/src/routes/_home/Testimonials.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/svelte.dev/src/routes/_home/Testimonials.svelte b/apps/svelte.dev/src/routes/_home/Testimonials.svelte index 961c35139c..93496891c4 100644 --- a/apps/svelte.dev/src/routes/_home/Testimonials.svelte +++ b/apps/svelte.dev/src/routes/_home/Testimonials.svelte @@ -73,7 +73,7 @@ width: 100%; top: 0; overflow: hidden; - filter: drop-shadow(0.2rem 0.4rem 2rem rgb(0 0 0 / 0.3)); + filter: drop-shadow(0.2rem 0.4rem 1.6rem rgb(0 0 0 / 0.2)); transform: translate3d(0, 0, 0); transition-property: filter, scale; transition-duration: 0.2s; @@ -100,7 +100,7 @@ &:hover { scale: 1.05; - filter: drop-shadow(0.2rem 0rem 4rem rgb(0 0 0 / 0.3)); + filter: drop-shadow(0.2rem 0.4rem 2.4rem rgb(0 0 0 / 0.2)); } }