fix hero images intersecting with background on older browsers

pluralsh · Aug 15, 2023 · bd778f2 · bd778f2
1 parent e938cec
commit bd778f2
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -70,7 +70,7 @@ const HeroImagesSC = styled.div(({ theme: _theme }) => {
     transformStyle: 'preserve-3d',
     perspective: '1200px',
     transformOrigin: 'center',
-    transform: 'rotateY(-00deg) rotateX(0deg)  rotateZ(0deg)',
+    transform: 'rotateY(-00deg) rotateX(0deg) rotateZ(0deg)',
 
     position: 'relative',
     width: '100%',
@@ -395,7 +395,6 @@ export default function Index({
         position="50% 50%"
         size="cover"
         image="/images/gradients/gradient-bg-2.jpg"
-        className="[perspective:1000px]"
       >
         <HomePageHero
           heading={

diff --git a/src/components/layout/GradientBG.tsx b/src/components/layout/GradientBG.tsx
@@ -15,6 +15,11 @@ const GradientBGSC = styled.div<{
     $image: image = '/images/gradients/gradient-bg-1.jpg',
   }) => ({
     position: 'relative',
+    '.bg': {
+      // Make sure background doesn't intersect 3d objects in older Safari
+      transform: `translateZ(-1000px)`,
+      perspective: 'none',
+    },
     '.bg, .bg::after': {
       '--blur-amount': '0px',
       overflow: 'hidden',

diff --git a/src/components/page-sections/HomepageFeaturesSection.tsx b/src/components/page-sections/HomepageFeaturesSection.tsx
@@ -116,12 +116,12 @@ const MultiImageWrapSC = styled.div<ImgPropsSC & { $direction: 1 | -1 }>(
     height: $height,
     width: $width,
     position: 'absolute',
+    transformStyle: 'preserve-3d',
+    perspective: PERSPECTIVE,
     // Keep box shadow looking correct
     // when containing rounded images
     borderRadius: 10,
     boxShadow: mShadows.light.moderate,
-    transformStyle: 'preserve-3d',
-    perspective: PERSPECTIVE,
   })
 )