Bug 196454 - REGRESSION: Safari 12.1 introduces a regression with flexbox and css grid
Summary: REGRESSION: Safari 12.1 introduces a regression with flexbox and css grid
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 12
Hardware: Mac Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2019-04-01 12:26 PDT by Steve Dignam
Modified: 2019-04-10 10:05 PDT (History)
7 users (show)

See Also:


Attachments
Testcase (2.19 KB, text/html)
2019-04-03 13:50 PDT, Simon Fraser (smfr)
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Steve Dignam 2019-04-01 12:26:15 PDT
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>
```
Comment 1 Radar WebKit Bug Importer 2019-04-03 13:39:39 PDT
<rdar://problem/49571163>
Comment 2 Simon Fraser (smfr) 2019-04-03 13:49:58 PDT
I see the same behavior in Safari 12.1 and Chrome 73.0.3683.86. Firefox is different. I'm not sure which is correct.
Comment 3 Simon Fraser (smfr) 2019-04-03 13:50:10 PDT
Created attachment 366638 [details]
Testcase
Comment 4 Manuel Rego Casasnovas 2019-04-03 14:38:43 PDT
I've tried to reproduce it but I'm not sure if I understand it properly.
I saw the same behavior in WebKit (trunk), Chrome Canary and Firefox Nightly; when the window is not tall enough, the user needs to scroll to see "help-text" element.
Comment 5 Steve Dignam 2019-04-04 05:42:21 PDT
I think the problem is two fold.

First in Safari 12.0.3 (13606.4.5.3.1) the html & css displayed the "help-text" at the bottom without any scrolling, but in Safari 12.1 the "help-text" is now below the scroll.

Secondly, there seems to be some difference in behavior between browsers. In order to get Chrome 73.0.3683.86 to produce the no scroll behavior, the `height: 100%` property of `.calendar` needs to be removed. 

Firefox 66.0b10 and Firefox 67.0b7 produce the desired, no scroll behavior regardless of the `.calendar` height property.