Attachment 478372 Details for Bug 307984 – Minimal CSS Bug Reproduction as single HTML file (no javascript, no external assets)

Minimal CSS Bug Reproduction as single HTML file (no javascript, no external assets)

container-type-media-query.html (text/html), 1.75 KB, created by Jan Nicklas on 2026-02-16 07:50:18 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Jan Nicklas

Created: 2026-02-16 07:50:18 PST

Size: 1.75 KB

patch

obsolete

><!DOCTYPE html>
><html>
><head>
><meta charset="utf-8">
><meta name="viewport" content="width=device-width">
><title>Safari bug: container-type breaks grid + media query on resize</title>
><style>
>  * { margin: 0; padding: 0; box-sizing: border-box; }
>
>  .page {
>    display: flex;
>    flex-direction: column;
>    height: 100vh;
>  }
>
>  .grid {
>    display: grid;
>    grid-template-columns: 200px 1fr;
>  }
>
>  .sidebar {
>    grid-column: 1;
>    grid-row: 1;
>    background: lightblue;
>    padding: 16px;
>  }
>
>  @media (max-width: 991px) {
>    .sidebar {
>      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>
>  
>  <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>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Safari bug: container-type breaks grid + media query on resize</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }

  .page {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  .grid {
    display: grid;
    grid-template-columns: 200px 1fr;
  }

  .sidebar {
    grid-column: 1;
    grid-row: 1;
    background: lightblue;
    padding: 16px;
  }

  @media (max-width: 991px) {
    .sidebar {
      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>

Actions: View

Attachments on bug 307984: 478372 | 478508