Fixing overscroll on non-Firefox browsers...

LutherTS · Oct 8, 2024 · 1b2029b · 1b2029b
1 parent d728c58
commit 1b2029b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/app/(pages)/carousel-part-cleaned/carousel.tsx b/app/(pages)/carousel-part-cleaned/carousel.tsx
@@ -465,6 +465,7 @@ export default function Carousel({
                     objectFitting === "scroll"
                       ? objectFittingScrollHeight
                       : "auto",
+                  // x: `-${index * 100}%`, // Safari again
                 }}
                 onAnimationStart={(definition: AnimationDefinition) =>
                   onStart(definition)
@@ -604,6 +605,8 @@ export default function Carousel({
           <div
             className={clsx(
               "absolute inset-x-0 bottom-6 flex h-14 justify-center overflow-x-hidden",
+              // trying to address thumbnails not appearing on Safari...
+              // "absolute mb-6 flex h-14 justify-center overflow-hidden",
               noDistracting !== "false" &&
                 noDistracting !== "imagesonly" &&
                 "hidden",

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -22,7 +22,11 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html
+      lang="en"
+      // I literally need to have overscroll-none on the HTML for any browser other than Firefox (specifically Safari, Chrome and I think Edge) to respect my carousel.
+      className="overscroll-none"
+    >
       <body className={`${geistSans.variable} ${geistMono.variable}`}>
         {children}
       </body>