Improve ios web app styling

src/helpers.ts

@@ -87,3 +87,33 @@ export function getTranslate(element: HTMLElement, direction: DrawerDirection):
 export function dampenValue(v: number) {
   return 8 * (Math.log(v + 1) - 2);
 }
+
+export function updateRgbaAlpha(rgbaColor: string, newAlpha: number): string {
+  // Ensure newAlpha is between 0 and 1
+  newAlpha = Math.max(0, Math.min(1, newAlpha));
+
+  // Extract the RGB values from the RGBA string
+  const rgbaParts = RegExp(/rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(?:,\s*([\d.]+))?\)/).exec(rgbaColor);
+
+  if (!rgbaParts) {
+    throw new Error(`Invalid RGBA color value: ${rgbaColor}`);
+  }
+
+  // Reconstruct the RGBA color with the new alpha value
+  const updatedRgbaColor = `rgba(${rgbaParts[1]}, ${rgbaParts[2]}, ${rgbaParts[3]}, ${newAlpha})`;
+
+  return updatedRgbaColor;
+}
+
+function parseRgba(rgba: string): [number, number, number, number] {
+  const match = rgba.match(/rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),?\s*([\d.]+)?\)/);
+  if (!match) {
+    throw new Error('Invalid RGBA color value');
+  }
+  return [
+    parseInt(match[1], 10),
+    parseInt(match[2], 10),
+    parseInt(match[3], 10),
+    match[4] !== undefined ? parseFloat(match[4]) : 1, // Default alpha to 1 if not provided
+  ];
+}

src/index.tsx

@@ -8,7 +8,7 @@ import { usePreventScroll, isInput, isIOS } from './use-prevent-scroll';
 import { useComposedRefs } from './use-composed-refs';
 import { usePositionFixed } from './use-position-fixed';
 import { useSnapPoints } from './use-snap-points';
-import { set, reset, getTranslate, dampenValue, isVertical } from './helpers';
+import { set, reset, getTranslate, dampenValue, isVertical, updateRgbaAlpha } from './helpers';
 import { TRANSITIONS, VELOCITY_THRESHOLD } from './constants';
 
 const CLOSE_THRESHOLD = 0.25;
@@ -79,6 +79,7 @@ function Root({
   // Not visible = translateY(100%)
   const [visible, setVisible] = React.useState<boolean>(false);
   const [mounted, setMounted] = React.useState<boolean>(false);
+  const [initialBodyBackground, setInitialBodyBackground] = React.useState<string | undefined>();
   const [isDragging, setIsDragging] = React.useState<boolean>(false);
   const [justReleased, setJustReleased] = React.useState<boolean>(false);
   const overlayRef = React.useRef<HTMLDivElement>(null);
@@ -100,6 +101,12 @@ function Root({
     if (snapPoints && activeSnapPointIndex === snapPointsOffset.length - 1) openTime.current = new Date();
   }, []);
 
+  const overlayBackgroundColor = React.useMemo(() => {
+    if (!overlayRef.current) return null;
+    const overlayStyle = window.getComputedStyle(overlayRef.current);
+    return overlayStyle.backgroundColor;
+  }, [overlayRef.current]);
+
   const {
     activeSnapPoint,
     activeSnapPointIndex,
@@ -404,9 +411,21 @@ function Root({
 
     set(overlayRef.current, {
       opacity: '0',
-      transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
+      background: initialBodyBackground,
+      transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')}), background ${
+        TRANSITIONS.DURATION
+      }s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
     });
 
+    set(
+      document.body,
+      {
+        background: initialBodyBackground,
+        transition: `background 0.3s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
+      },
+      true,
+    );
+
     scaleBackground(false);
 
     setTimeout(() => {
@@ -443,6 +462,19 @@ function Root({
     }
   }, [openProp]);
 
+  React.useEffect(() => {
+    if (mounted && isOpen && overlayBackgroundColor) {
+      set(
+        document.body,
+        {
+          background: updateRgbaAlpha(overlayBackgroundColor, 1),
+          transition: 'none',
+        },
+        true,
+      );
+    }
+  }, [overlayBackgroundColor, isOpen]);
+
   // This can be done much better
   React.useEffect(() => {
     if (mounted) {
@@ -452,6 +484,12 @@ function Root({
 
   React.useEffect(() => {
     setMounted(true);
+
+    // initially setting and caching original body styles
+    setInitialBodyBackground(document.body.style.backgroundColor || document.body.style.background);
+    set(document.body, {
+      background: document.body.style.backgroundColor || document.body.style.background,
+    });
   }, []);
 
   function resetDrawer() {
@@ -597,19 +635,6 @@ function Root({
     if (!wrapper || !shouldScaleBackground) return;
 
     if (open) {
-      // setting original styles initially
-      set(document.body, {
-        background: document.body.style.backgroundColor || document.body.style.background,
-      });
-      // setting body styles, with cache ignored, so that we can get correct original styles in reset
-      set(
-        document.body,
-        {
-          background: 'black',
-        },
-        true,
-      );
-
       set(wrapper, {
         borderRadius: `${BORDER_RADIUS}px`,
         overflow: 'hidden',

website/src/app/components/hero.tsx

@@ -8,7 +8,6 @@ export function Hero() {
       <div
         aria-hidden
         className="absolute top-0 w-[1000px] z-10 h-[400px] left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-[0.15] pointer-events-none"
-        style={{ backgroundImage: 'radial-gradient(#A4A4A3, transparent 50%)' }}
       />
       <svg
         className="absolute pointer-events-none inset-0 h-full w-full stroke-gray-200 opacity-50 [mask-image:radial-gradient(100%_100%_at_top_center,white,transparent)]"

website/src/app/globals.css

@@ -27,7 +27,6 @@ html {
 
 main {
   min-height: 100vh;
-  background: white;
 }
 
 html {

website/src/app/layout.tsx

@@ -10,8 +10,14 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
+      <head>
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+      </head>
       <body className="antialiased text-gray-900 bg-gray-50">
-        <main vaul-drawer-wrapper="">{children}</main>
+        <main vaul-drawer-wrapper="" className="bg-gray-50">
+          {children}
+        </main>
         <Analytics />
       </body>
     </html>