/* iOS Safari Scrolling Fixes */ /* This file contains iOS-specific CSS fixes for scrolling issues */ /* Ensure proper scrolling on iOS devices */ html { -webkit-text-size-adjust: 100%; } body { /* Never use position: fixed on body - it breaks iOS scrolling */ -webkit-overflow-scrolling: touch; } /* Enable momentum scrolling on all scrollable containers */ .innerContainer, .pickAnsLayout, .innerRightLayout__innerpage { -webkit-overflow-scrolling: touch; } /* iOS Safari specific: Prevent scrolling issues with fixed positioning */ /* JavaScript detection adds .ios-safari class to for Safari only */ @supports (-webkit-touch-callout: none) { /* iOS devices (both Safari and Chrome) */ /* Fix viewport height issues on iOS */ .innerContainer { height: calc(100vh - 144px) !important; } /* Use dvh only in landscape mode where keyboard issues occur */ @media (orientation: landscape) { .innerContainer { height: calc(100dvh - 144px) !important; } } /* Fix for iOS rubber band effect */ html, body { overscroll-behavior-y: none; } } /* Safari-specific fix - only apply position: relative to Safari to avoid Chrome modal issues */ html.ios-safari body { position: relative !important; overflow-x: hidden; } /* Chrome on iOS - explicitly prevent position: relative */ html.ios-chrome body { position: static !important; overflow-x: hidden; } /* Chrome on iOS - prevent innerContainer from creating stacking context */ /* No longer needed with custom slideout - kept for backward compatibility */ html.ios-chrome .innerContainer { position: static !important; z-index: auto !important; } /* Prevent iOS from zooming on input focus */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], textarea, select { font-size: 16px !important; } /* Fix for iOS safe areas (iPhone X and newer) */ @supports (padding: max(0px)) { body { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); } /* Add padding-bottom to scrollable containers to prevent content from being cut off by safe area */ .innerContainer, .innerRightLayout__innerpage, .pickAnsLayout__rightSide, .innerRightLayout__leftSide, .innerRightLayout__expert, .innerRightLayout__profile { padding-bottom: max(24px, calc(24px + env(safe-area-inset-bottom))) !important; } /* Ensure notification list also has safe area padding */ .notification-list { padding-bottom: max(24px, calc(24px + env(safe-area-inset-bottom))) !important; } } /* Improve touch performance on iOS */ * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* Fix for iOS Safari address bar height changes */ @media only screen and (max-width: 790px) { .pickAnsLayout__rightSide { height: calc(100vh - 120px) !important; } } /* Prevent iOS from adding default styles to inputs */ input, textarea, button { -webkit-appearance: none; } /* Fix button rendering on iOS */ button { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Ensure button text displays properly on iOS */ button span, button p { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; display: inline-block; } /* iPad specific button fixes */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { /* Force buttons to render properly on iPad portrait */ .btn { -webkit-appearance: none !important; appearance: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .btn span, .btn p { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; } } /* Ensure scrollable containers work on iOS */ .scroll-container { overflow: auto; -webkit-overflow-scrolling: touch; } /* Fix for Chrome iPad landscape mode - prevent body/page scroll when modal is open */ html.ios-chrome body.modal-open, html.ios-chrome body.modal-open .innerContainer { /* Prevent the page from scrolling when modal with keyboard is open */ overflow: hidden; }