Created
February 9, 2026 09:51
-
-
Save jantimon/7b43ea37daea805c7cc61f9d1993f8d7 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>Safari bug: container-type breaks grid + transform media query on resize</title> | |
| <style> | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| .page { | |
| display: flex; | |
| flex-direction: column; | |
| min-height: calc(100vh + 1px); | |
| } | |
| .grid { | |
| display: grid; | |
| grid-template-columns: auto 1fr; | |
| flex-grow: 1; | |
| } | |
| .sidebar { | |
| grid-column: 1; | |
| grid-row: 1; | |
| transition: transform .3s ease; | |
| background: lightblue; | |
| padding: 16px; | |
| } | |
| @media (max-width: 991px) { | |
| .sidebar { | |
| transform: translateX(-100%); | |
| grid-column: 1 / 3; | |
| } | |
| } | |
| .main { | |
| grid-column: 1 / 3; | |
| grid-row: 1; | |
| background: pink; | |
| padding: 16px; | |
| min-height: 400px; | |
| } | |
| @media (min-width: 992px) { | |
| .main { | |
| grid-column: 2; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- | |
| Safari bug: container-type element prevents grid layout from | |
| recalculating after window resize across media query breakpoints. | |
| Steps to reproduce: | |
| 1. Open in Safari at window width < 992px (mobile). | |
| Result: Sidebar hidden (translateX(-100%)), pink main content fills page. CORRECT. | |
| 2. Resize window to width > 992px (desktop). | |
| Result: Light blue sidebar appears, pink main content in column 2. CORRECT. | |
| 3. Reload the page at desktop width. | |
| 4. Resize window back to width < 992px (mobile). | |
| Result: BUG — sidebar remains visible, main content doesn't reclaim full width. | |
| Expected: Step 4 should look identical to step 1. | |
| Workaround: Remove the container-type div below. | |
| --> | |
| <div style="container-type: inline-size"></div> | |
| <div class="page"> | |
| <header>Header</header> | |
| <div class="grid"> | |
| <nav class="sidebar">Sidebar</nav> | |
| <main class="main">Main Content</main> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment