[Webkit-unassigned] [Bug 196454] New: REGRESSION: Safari 12.1 introduces a regression with flexbox and css grid

Mon Apr 1 12:26:15 PDT 2019

https://bugs.webkit.org/show_bug.cgi?id=196454

            Bug ID: 196454
           Summary: REGRESSION: Safari 12.1 introduces a regression with
                    flexbox and css grid
           Product: WebKit
           Version: Safari 12
          Hardware: Macintosh
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: steve at dignam.xyz

The following html & css was tested and worked correctly on Safari Version 12.0.3 (13606.4.5.3.1), Firefox 66.0b10, and Chrome 73.0.3683.86.

I recently upgraded to Safari Version 12.1 (12607.1.40.1.5) and the css no longer functions as expected.

In the working browsers, the "help-text" stays at the bottom of the window on initial load and stays at the bottom while dragging the bottom of the window up.
Now on initial load with Safari 12.1, the "help-text" is hidden below the scroll.

Note: Safari 12.1 required `height: 100` on one of the elements to work while Chrome and Firefox do not. 
When demoing in Chrome and Firefox be sure to comment out the line noted below.

Here is some html & css that demonstrates the bug:

```
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <style type="text/css">
      body {
        margin: 0;
      }
      html {
        box-sizing: border-box;
        font-size: 16px;
        height: 100%;
        min-width: 300px;
      }

      nav {
        background-color: gray;
        height: 65px;
      }

      .container {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        height: calc(100vh - 65px);
      }

      .calendar {
        background-color: lightcoral;
        display: grid;
        flex-grow: 1;
        grid-auto-rows: 1fr;
        grid-gap: 0.25rem;
        grid-template-columns: repeat(7, minmax(100px, 1fr));
        /* only necessary in Safari */
        height: 100%;
      }

      .help-text {
        background-color: lightblue;
        margin: 0;
        padding-bottom: 0.25rem;
        padding-top: 0.5rem;
      }
    </style>
  </head>
  <body>
    <nav></nav>
    <div class="container">
      <section class="calendar">
        <div>
          <p>24</p>
        </div>
        <div>
          <p>25</p>
        </div>
        <div>
          <p>26</p>
        </div>
        <div>
          <p>27</p>
        </div>
        <div>
          <p>28</p>
        </div>
        <div>
          <p>29</p>
        </div>
        <div>
          <p>30</p>
        </div>
        <div>
          <p>31</p>
        </div>
        <div>
          <p>Apr 1</p>
        </div>
        <div>
          <p>2</p>
        </div>
        <div>
          <p>3</p>
        </div>
        <div>
          <p>4</p>
        </div>
        <div>
          <p>5</p>
        </div>
        <div>
          <p>6</p>
        </div>
        <div>
          <p>7</p>
        </div>
        <div>
          <p>8</p>
        </div>
        <div>
          <p>9</p>
        </div>
        <div>
          <p>10</p>
        </div>
        <div>
          <p>11</p>
        </div>
        <div>
          <p>12</p>
        </div>
        <div>
          <p>13</p>
        </div>
      </section>
      <p class="help-text">press ? for help</p>
    </div>
  </body>
</html>
```

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20190401/f1aedb04/attachment.html>