/* ============================================================ ios-normalizer.css Path: /marketplace/src/assets/css/ios-normalizer.css PURPOSE: Prevents iOS Safari (and all browsers on iPhone/iPad) from breaking layouts due to font inflation, oversized images, SVG blowout, horizontal scroll, and safe-area issues. USAGE: Add to every page BEFORE all other stylesheets: ============================================================ */ /* ------------------------------------------------------------ 1. VIEWPORT & FONT INFLATION iOS Safari inflates font sizes on landscape / small screens. -webkit-text-size-adjust: 100% locks fonts to their CSS size. ------------------------------------------------------------ */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ------------------------------------------------------------ 2. UNIVERSAL BOX MODEL Ensures padding/border are included in width calculations. Prevents unexpected overflow on all elements. ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } /* ------------------------------------------------------------ 3. MEDIA ELEMENTS — NEVER EXCEED CONTAINER Prevents images, SVGs, videos, iframes from blowing out their parent containers (the root cause of the giant logo). ------------------------------------------------------------ */ img, svg, video, canvas, picture, iframe, embed, object { max-width: 100%; height: auto; display: block; } /* ------------------------------------------------------------ 4. SVG SPECIFIC On iOS, inline SVGs and

can render at their intrinsic document size (often huge) if not explicitly bounded. ------------------------------------------------------------ */ svg { width: 100%; height: auto; max-width: 100%; overflow: hidden; } /* ------------------------------------------------------------ 5. IMAGES INSIDE FIXED-SIZE CONTAINERS Tailwind size-*, rounded-full, overflow-hidden containers should always clip/contain their child images. ------------------------------------------------------------ */ .overflow-hidden > img, .rounded-full > img, .rounded-xl > img, .rounded-2xl > img, [class*="size-"] > img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover; } /* Logo / icon images that should be contained (not cropped) */ [class*="size-"] > img[class*="object-contain"], .overflow-hidden > img[class*="object-contain"] { object-fit: contain; } /* ------------------------------------------------------------ 6. HORIZONTAL SCROLL PREVENTION A single element wider than the viewport causes the whole page to scroll horizontally on iOS. This stops that. ------------------------------------------------------------ */ html, body { max-width: 100%; overflow-x: hidden; } /* ------------------------------------------------------------ 7. SAFE AREA INSETS (iPhone notch / home indicator) Use var(--safe-bottom) and var(--safe-top) in your CSS for elements near the edges (e.g. bottom nav). ------------------------------------------------------------ */ :root { --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); /* Dynamic viewport height fix (set by ios-normalizer.js). Use: height: calc(var(--vh, 1vh) * 100) instead of: height: 100vh on any full-height element. */ --vh: 1vh; } /* ------------------------------------------------------------ 8. iOS SAFE AREA UTILITY CLASS Used on the bottom nav bar to avoid the home indicator. ------------------------------------------------------------ */ .pb-safe { padding-bottom: var(--safe-bottom); } .pt-safe { padding-top: var(--safe-top); } /* ------------------------------------------------------------ 9. TAP HIGHLIGHT REMOVAL iOS adds a grey flash on tap for all interactive elements. This removes it for a native-app feel. ------------------------------------------------------------ */ * { -webkit-tap-highlight-color: transparent; } /* ------------------------------------------------------------ 10. MOMENTUM SCROLLING Enables smooth inertia scrolling on iOS for overflow areas (horizontal product strips, drawers, dropdowns, etc.) ------------------------------------------------------------ */ * { -webkit-overflow-scrolling: touch; } /* ------------------------------------------------------------ 11. INPUT / FORM FIXES iOS Safari zooms in on inputs with font-size < 16px. This forces 16px minimum to prevent unwanted zoom. ------------------------------------------------------------ */ input, textarea, select { font-size: max(16px, 1em); } /* ------------------------------------------------------------ 12. BUTTON RESET iOS applies its own button styling. Reset for consistency. ------------------------------------------------------------ */ button { -webkit-appearance: none; appearance: none; cursor: pointer; } /* ------------------------------------------------------------ 13. IOS-SPECIFIC TARGETED OVERRIDES Applied only when ios-normalizer.js adds .ios to . Use these for edge cases that only appear on real devices. ------------------------------------------------------------ */ /* Fix: position:fixed elements shift when iOS keyboard opens */ .ios input:focus ~ .fixed, .ios textarea:focus ~ .fixed { position: absolute; } /* Fix: 100vh on iOS includes the address bar height */ .ios .h-screen { height: calc(var(--vh, 1vh) * 100); } .ios .min-h-screen { min-height: calc(var(--vh, 1vh) * 100); } .ios .max-h-screen { max-height: calc(var(--vh, 1vh) * 100); } /* ------------------------------------------------------------ 14. BROKEN IMAGE HIDING If an image fails to load, hide it cleanly instead of showing the broken-image icon or alt text overflow. ------------------------------------------------------------ */ img[data-img-error="true"] { display: none !important; } /* ------------------------------------------------------------ 15. TRANSITION PERFORMANCE Force GPU compositing on animated elements to prevent iOS jank on transforms and opacity transitions. ------------------------------------------------------------ */ .transition, .transition-all, .transition-transform, [class*="transition"] { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }