Fixed gallery scroll issues on ios

alexristinmaa · Dec 7, 2024 · e7cce2b · e7cce2b
1 parent 6fa3060
commit e7cce2b
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 4 deletions.
diff --git a/alexanderristinmaa/app/(homepage)/alex/page.module.css b/alexanderristinmaa/app/(homepage)/alex/page.module.css
@@ -1,5 +1,6 @@
 #imgDiv {
     width: 500px;
+    overflow-y: hidden;
 }
 
 #imgDiv > p {
@@ -10,19 +11,22 @@
 #img {
     width: 100%;
     border: 2px solid var(--black);
+    overflow-y: hidden;
 }
 
 #imgText {
     display: flex;
     flex-direction: row;
     gap: 30px;
+    overflow-y: hidden;
 }
 
 #textDiv {
     flex: 1;
     display: flex;
     gap: 1em;
     flex-direction: column;
+    overflow-y: hidden;
 }
 
 #textDiv a {

diff --git a/alexanderristinmaa/app/(homepage)/gallery/page.module.css b/alexanderristinmaa/app/(homepage)/gallery/page.module.css
@@ -5,18 +5,19 @@
     width: 100vw;
     margin-bottom: calc(var(--mainTopBottomPadding) * -2 - var(--footerHeight));
     perspective: 10px;
-    overflow-y: auto;
+    overflow-y: scroll;
     overflow-x: hidden;
     background-color: var(--white);
     scroll-behavior: smooth;
+    z-index: 2;
 }
 
 #mainImage {
     background-image: url('main.jpg');
     background-size: cover;
     background-position: bottom;
     width: 100%;
-    height: calc(100vh - var(--navTitleSize) - var(--navPadding) * 2 - var(--navTextPadding) * 2 - 5px);
+    height: calc(100dvh - var(--navTitleSize) - var(--navPadding) * 2 - var(--navTextPadding) * 2 - 5px);
     transform: translateZ(-5px) scale(1.5);
 }
 
@@ -33,7 +34,7 @@
     width: 100%;
     position: absolute;
     color: white;
-    top: calc(100vh - var(--navTitleSize) - var(--navPadding) * 2 - var(--navTextPadding) * 2 - 5px - 0.95em);
+    top: calc(100dvh - var(--navTitleSize) - var(--navPadding) * 2 - var(--navTextPadding) * 2 - 5px - 0.95em);
 }
 
 #rest {

diff --git a/alexanderristinmaa/app/(homepage)/layout.module.css b/alexanderristinmaa/app/(homepage)/layout.module.css
@@ -44,7 +44,7 @@
 #body {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 100dvh;
 }
 
 #main {
@@ -62,4 +62,5 @@
   justify-content: center;
   text-align: center;
   white-space: pre-line;
+  overflow-y: hidden;
 }
diff --git a/alexanderristinmaa/app/globals.css b/alexanderristinmaa/app/globals.css
@@ -37,6 +37,11 @@ body {
   color: var(--black);
 }
 
+body {
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;  
+}
+
 a {
   color: inherit;
   text-decoration: none;