/* ======================================== * 6. BROWSER-SPECIFIC FIXES * ======================================== */ /* iOS Safari Specific Fixes */ @supports (-webkit-touch-callout: none) { /* Prevent iOS zoom on input focus */ input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="number"], input[type="datetime-local"], select, textarea { font-size: 16px; } /* iOS: Enhanced mobile sheet touch behavior */ /* iOS: Optimize drag handle for touch */ #listings-sheet .bottom-sheet-drag-button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; } /* iOS: Ensure content area scrolls properly (spot details content + listings shell). */ body.bottom-sheet-spot-details-mode #listings-content-sheet.spot-details-scroll-active, #listings-scroll-shell.listings-scroll-active { transform: translateZ(0); overscroll-behavior: contain; touch-action: pan-y; } /* Listings: never let the cards node become a nested scroller on iOS. */ body.discover-page:not(.bottom-sheet-spot-details-mode) #listings-content-sheet { overflow-y: visible !important; height: auto !important; max-height: none !important; } } /* Single closing brace for @supports block */ /* ======================================== * HORIZONTAL SCROLL PREVENTION * ======================================== */ /* CRITICAL: Prevent horizontal overflow in all listings overlay content */ /* Ensure spot cards don't cause horizontal overflow */ /* Ensure all text content wraps properly */ /* ======================================== * CHROME DESKTOP SCROLL FIX * ======================================== */ /* CRITICAL: Chrome-specific fix for scroll blocking when hovering over cards * Issue: Chrome blocks parent scroll when mouse hovers over child elements with * certain CSS properties (overflow, transforms, will-change, contain). * Solution: Ensure cards don't create scroll context and allow wheel events to bubble. * This file loads last, so these rules have highest priority. */ /* Desktop-only (non-touch devices) */ @media (min-width: 1101px) and (hover: hover) and (pointer: fine) { /* CHROME FIX: Ensure listings overlay can receive wheel events */ #listings-overlay { overscroll-behavior: auto !important; scroll-behavior: auto !important; touch-action: auto !important; /* CHROME SCROLLBAR FIX: Ensure scrollbar is interactive */ scrollbar-gutter: stable !important; scrollbar-width: thin !important; scrollbar-color: rgba(0, 0, 0, 0.2) transparent !important; } /* CHROME SCROLLBAR FIX: Ensure scrollbar has minimum width for mouse interaction */ #listings-overlay::-webkit-scrollbar { width: 8px !important; display: block !important; } #listings-overlay::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2) !important; border-radius: 4px !important; border: 2px solid transparent !important; background-clip: padding-box !important; min-height: 40px !important; } #listings-overlay::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.35) !important; background-clip: padding-box !important; } #listings-overlay::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05) !important; border-radius: 4px !important; } /* Dark mode scrollbar */ .dark #listings-overlay::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2) !important; background-clip: padding-box !important; } .dark #listings-overlay::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35) !important; background-clip: padding-box !important; } .dark #listings-overlay::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05) !important; } /* CHROME FIX: Ensure spot cards don't create scroll context or block wheel events */ #listings-overlay .spot-card, #listings-content .spot-card { overflow: visible !important; overscroll-behavior: auto !important; touch-action: auto !important; /* Don't use contain: layout/paint - it creates compositor layers that block scroll */ contain: none !important; /* Ensure cards don't isolate stacking context in a way that blocks events */ isolation: auto !important; } /* CHROME FIX: Ensure card hover overlays don't intercept scroll events */ #listings-overlay .spot-card .absolute.inset-0, #listings-content .spot-card .absolute.inset-0, #listings-overlay .spot-card::before, #listings-content .spot-card::before, #listings-overlay .spot-card::after, #listings-content .spot-card::after { pointer-events: none !important; } /* CHROME FIX: Ensure image hover transform doesn't block scroll */ #listings-overlay .spot-card .spot-card-image, #listings-content .spot-card .spot-card-image, #listings-overlay .spot-card .spot-card-image img, #listings-content .spot-card .spot-card-image img { pointer-events: auto !important; /* Allow wheel events to pass through to parent */ touch-action: auto !important; } /* CHROME FIX: Marquee title wrapper - allow overflow:hidden for visual masking but ensure wheel events bubble to parent scroll container. The needs-scroll class requires overflow:hidden for marquee clipping, so we can't set overflow:visible here. Instead, use overscroll-behavior and touch-action to allow scroll events to pass through. */ #listings-overlay .spot-card .spot-card-title-wrapper, #listings-content .spot-card .spot-card-title-wrapper { /* Don't override overflow - marquee needs overflow:hidden for clipping */ /* But ensure scroll events bubble to parent */ overscroll-behavior: auto !important; touch-action: pan-y pan-x !important; } /* CHROME FIX: Title content inside marquee - ensure wheel events pass through */ #listings-overlay .spot-card .spot-card-title-content, #listings-content .spot-card .spot-card-title-content { overscroll-behavior: auto !important; touch-action: pan-y pan-x !important; } /* CHROME FIX: Static titles (without marquee) - can be overflow:visible */ #listings-overlay .spot-card .spot-card-title-wrapper:not(.needs-scroll), #listings-content .spot-card .spot-card-title-wrapper:not(.needs-scroll) { overflow: visible !important; touch-action: auto !important; } /* CHROME FIX: Clickable address has inline overflow:hidden - must pass scroll events */ #listings-overlay .spot-card .clickable-address, #listings-content .spot-card .clickable-address { overscroll-behavior: auto !important; touch-action: pan-y pan-x !important; } /* CHROME FIX: Image container has overflow-hidden class - must pass scroll events */ #listings-overlay .spot-card .relative.overflow-hidden, #listings-content .spot-card .relative.overflow-hidden, #listings-overlay .spot-card div[class*="overflow-hidden"], #listings-content .spot-card div[class*="overflow-hidden"] { overscroll-behavior: auto !important; touch-action: pan-y pan-x !important; } /* CHROME FIX: All child elements inside spot cards must allow scroll passthrough */ #listings-overlay .spot-card *, #listings-content .spot-card * { overscroll-behavior: auto !important; } /* CHROME FIX: Sticky header blocks mousewheel scroll when mouse hovers over it. Per Chrome bug: https://stackoverflow.com/questions/12662226 Solution: pointer-events:none on sticky, then pointer-events:auto on interactive children */ #listings-overlay > .discover-listings-sticky-header { pointer-events: none !important; } /* CHROME FIX: Re-enable pointer events on interactive elements inside sticky header */ #listings-overlay > .discover-listings-sticky-header button, #listings-overlay > .discover-listings-sticky-header a, #listings-overlay > .discover-listings-sticky-header [role="button"], #listings-overlay > .discover-listings-sticky-header [role="radio"], #listings-overlay > .discover-listings-sticky-header .space-type-toggle, #listings-overlay > .discover-listings-sticky-header #sort-toggle-desktop, #listings-overlay > .discover-listings-sticky-header #amenities-popup-trigger-desktop, #listings-overlay > .discover-listings-sticky-header #sort-dropdown-desktop { pointer-events: auto !important; } /* CHROME FIX: Ensure sort dropdown is interactive when visible */ #sort-dropdown-desktop:not(.hidden) { pointer-events: auto !important; } } /* Android Chrome Specific Fixes */