From 94e6b9292917d61294d2baa9c89c8ad75b552180 Mon Sep 17 00:00:00 2001
From: Michele Tartari <37861893+m-tartari@users.noreply.github.com>
Date: Wed, 12 Mar 2025 18:24:53 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(hero):=20fix=20background=20?=
 =?UTF-8?q?not=20scaled=20on=20iOS=20devices=20(#404)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

iOS is using the full height & width of the body instead of the viewport to decide the size.
This causes problems with css `background-attachment: fixed`

see https://stackoverflow.com/questions/24154666/background-size-cover-not-working-on-ios/30469824#30469824
---
 src/components/molecules/Hero/Hero.tsx | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/components/molecules/Hero/Hero.tsx b/src/components/molecules/Hero/Hero.tsx
index eaaf8df..848b6df 100644
--- a/src/components/molecules/Hero/Hero.tsx
+++ b/src/components/molecules/Hero/Hero.tsx
@@ -8,14 +8,14 @@ const Hero = (props: { scrollTarget?: React.ForwardedRef<HTMLSelectElement> }) =
   return (
     <Box
       sx={{
-        postition: 'relative',
+        position: 'relative',
 
         minHeight: '100vh',
         boxShadow: '0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25)',
 
         backgroundImage: 'url("images/banner-blur.webp")',
         backgroundPosition: 'center center',
-        backgroundAttachment: 'fixed',
+        backgroundAttachment: { xs: 'scroll !important', md: 'fixed' },
         backgroundSize: 'cover',
 
         display: 'flex',
@@ -42,19 +42,15 @@ const Hero = (props: { scrollTarget?: React.ForwardedRef<HTMLSelectElement> }) =
 							<h3>Robotics Engineer</h3>
              */}
           <Typography
-            variant="h3"
-            // sx={{
-            // fontSize: '2.5em',
-            // margin: 0,
-            // }}
-          >
+            // sx={{ fontSize: '2.5em',margin: 0 }}
+            variant="h3">
             Robotics Engineer
           </Typography>
           <Typography
             color="text.secondary"
             sx={{
-              margin: '0.5em 0 0 0',
               // margin: { xs: '0.5em 1em', md: '0.5em 0 0 0' },
+              margin: '0.5em 0 0 0',
               top: 0,
             }}>
             See some of my works below. Send a message to get in touch.