What is causing my CSS Grid elements to display incorrectly in Safari and how can I fix it for both Safari on desktop and Safari on iPad?

If your CSS Grid layout is displaying incorrectly in Safari (both desktop and iPad), it's likely due to Safari's partial support of some grid features or known browser-specific quirks.

1. Check for Implicit Grid Track Issues

• Safari can misinterpret auto-placed elements or implicit rows/columns if your grid container's grid-template-rows or grid-template-columns isn't explicitly defined.
• Fix: Define explicit tracks (e.g., grid-template-columns: repeat(3, 1fr);) and limit reliance on auto-placement for critical layout.

2. Avoid minmax(0, 1fr) Inside Auto-Flow Grids

• Safari has inconsistent handling of minmax(0, 1fr) or percent-based track sizes, especially when used in auto-fill or auto-fit contexts.
• Fix: Try replacing minmax(0, 1fr) with more control like minmax(200px, 1fr) or drop minmax unless necessary.

3. Use -webkit-line-clamp Carefully With Grid

• If you're using line-clamp with display: grid, Safari may conflict layout behavior between the grid and the clamped content height.
• Fix: Apply clamping only to children inside the grid, not on the grid container.

4. Remove display: contents on Grid Children

• Safari does not fully support display: contents on grid children, which can break layout or accessibility.
• Fix: Avoid or remove display: contents on any direct children of a grid container.

5. Use Autoprefixer or Webflow's Built-in Prefixing

• Safari needs vendor prefixes for some grid behaviors. If you’re writing custom CSS inside an Embed or through custom code, un-prefixed properties may not work correctly.
• Fix: Ensure Autoprefixer is enabled (Webflow does this automatically inside Designer and Style Panel) or manually add -ms- prefixes if exporting code externally.

6. Trigger Repaint with Transform (if Layout Breaking on Resize)

• Safari iPad can have rendering glitches that appear only after orientation change or resize.
• Fix: Add a trivial transform: translateZ(0); or will-change: transform; to the grid container or elements that visually "break" when resizing.

7. Test overflow and height Constraints

• Safari may collapse grid rows if child elements have overflow: hidden; with a constrained height, leading to rendering issues.
• Fix: Verify height, min-height, and overflow values on both the grid container and children.

Summary

To fix CSS Grid issues in Safari (desktop and iPad), ensure you define explicit grid tracks, avoid Safari-incompatible patterns like display: contents or improper minmax usage, and use Webflow's auto-prefixing. Also, test layout during resize/orientation changes, especially on iPad. Adjust with transforms or height fixes as necessary.