iPhone Screen Checker

Safari-Specific CSS Issues

• •100vh layouts taller than the visible screen due to Safari's viewport height calculation
• •Gap property in Flexbox not working on older iOS versions (pre-iOS 14.5)
• •position: sticky not working inside overflow containers
• •Backdrop-filter requiring -webkit- prefix for blur effects

Safe Area Problems

• •Fixed bottom navigation hidden behind iPhone home indicator
• •Full-screen hero sections with content obscured by Dynamic Island
• •Modal close buttons unreachable behind notch area
• •Horizontal scrolling content cut off by side safe areas in landscape

Input and Form Issues

• •Unwanted zoom on input focus when font-size is below 16px
• •Keyboard appearance causing fixed elements to overlap form fields
• •Date and time inputs rendering as iOS native pickers instead of custom designs
• •Autocomplete styling that overrides custom input appearance

Fix 100vh on Safari iOS

The most common iPhone layout bug is elements taller than the visible screen. Use dynamic viewport units or the fill-available workaround:

/* Modern approach using dynamic viewport units */
.hero {
  min-height: 100dvh; /* Dynamic viewport height — excludes browser chrome */
}

/* Fallback for older iOS versions */
.hero {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

/* Set on html for fill-available to work correctly */
html {
  height: -webkit-fill-available;
}

Add Safe Area Insets

Prevent content from being hidden behind the Dynamic Island or home indicator:

/* Add to your HTML head */
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

/* Then in CSS */
.fixed-header {
  padding-top: env(safe-area-inset-top);
  top: 0;
}

.fixed-footer {
  padding-bottom: env(safe-area-inset-bottom);
  bottom: 0;
}

/* For full-screen sections */
.fullscreen {
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

Fix Safari Flexbox Gap

The gap property in Flexbox wasn't supported until iOS 14.5. For broader compatibility, use margins as a fallback:

/* Safe Flexbox gap with fallback */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  margin: -8px; /* Negative margin trick */
}

.flex-item {
  margin: 8px; /* Fallback for old iOS */
}

/* Override with gap for modern browsers */
@supports (gap: 1px) {
  .flex-container {
    gap: 16px;
    margin: 0;
  }
  .flex-item {
    margin: 0;
  }
}