196454 2019-04-01 12:26:15 -0700 REGRESSION: Safari 12.1 introduces a regression with flexbox and css grid 2019-04-10 10:05:19 -0700 1 1 1 Unclassified WebKit CSS Safari 12 Mac Unspecified NEW InRadar P2 Normal --- 1 steve webkit-unassigned bfulgham jfernandez puiu.alexandru rego simon.fraser webkit-bug-importer zalan oldest_to_newest 1523003 0 steve 2019-04-01 12:26:15 -0700 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> ``` 1523886 1 webkit-bug-importer 2019-04-03 13:39:39 -0700 <rdar://problem/49571163> 1523894 2 simon.fraser 2019-04-03 13:49:58 -0700 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. 1523897 3 366638 simon.fraser 2019-04-03 13:50:10 -0700 Created attachment 366638 Testcase 1523944 4 rego 2019-04-03 14:38:43 -0700 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. 1524195 5 steve 2019-04-04 05:42:21 -0700 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. 366638 2019-04-03 13:50:10 -0700 2019-04-03 13:50:10 -0700 Testcase flex-grid-test.html text/html 2239 simon.fraser PGh0bWwgbGFuZz0iZW4iPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0idXRmLTgiIC8+CiAg ICA8bWV0YQogICAgICBuYW1lPSJ2aWV3cG9ydCIKICAgICAgY29udGVudD0id2lkdGg9ZGV2aWNl LXdpZHRoLCBpbml0aWFsLXNjYWxlPTEsIHNocmluay10by1maXQ9bm8iCiAgICAvPgogICAgPHN0 eWxlIHR5cGU9InRleHQvY3NzIj4KICAgICAgYm9keSB7CiAgICAgICAgbWFyZ2luOiAwOwogICAg ICB9CiAgICAgIGh0bWwgewogICAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7CiAgICAgICAg Zm9udC1zaXplOiAxNnB4OwogICAgICAgIGhlaWdodDogMTAwJTsKICAgICAgICBtaW4td2lkdGg6 IDMwMHB4OwogICAgICB9CgogICAgICBuYXYgewogICAgICAgIGJhY2tncm91bmQtY29sb3I6IGdy YXk7CiAgICAgICAgaGVpZ2h0OiA2NXB4OwogICAgICB9CgogICAgICAuY29udGFpbmVyIHsKICAg ICAgICBkaXNwbGF5OiBmbGV4OwogICAgICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgICAg ICAgZmxleC1ncm93OiAxOwogICAgICAgIGhlaWdodDogY2FsYygxMDB2aCAtIDY1cHgpOwogICAg ICB9CgogICAgICAuY2FsZW5kYXIgewogICAgICAgIGJhY2tncm91bmQtY29sb3I6IGxpZ2h0Y29y YWw7CiAgICAgICAgZGlzcGxheTogZ3JpZDsKICAgICAgICBmbGV4LWdyb3c6IDE7CiAgICAgICAg Z3JpZC1hdXRvLXJvd3M6IDFmcjsKICAgICAgICBncmlkLWdhcDogMC4yNXJlbTsKICAgICAgICBn cmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCg3LCBtaW5tYXgoMTAwcHgsIDFmcikpOwogICAg ICAgIC8qIG9ubHkgbmVjZXNzYXJ5IGluIFNhZmFyaSAqLwovKiAgICAgICAgaGVpZ2h0OiAxMDAl OyovCiAgICAgIH0KCiAgICAgIC5oZWxwLXRleHQgewogICAgICAgIGJhY2tncm91bmQtY29sb3I6 IGxpZ2h0Ymx1ZTsKICAgICAgICBtYXJnaW46IDA7CiAgICAgICAgcGFkZGluZy1ib3R0b206IDAu MjVyZW07CiAgICAgICAgcGFkZGluZy10b3A6IDAuNXJlbTsKICAgICAgfQogICAgPC9zdHlsZT4K ICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8bmF2PjwvbmF2PgogICAgPGRpdiBjbGFzcz0iY29udGFp bmVyIj4KICAgICAgPHNlY3Rpb24gY2xhc3M9ImNhbGVuZGFyIj4KICAgICAgICA8ZGl2PgogICAg ICAgICAgPHA+MjQ8L3A+CiAgICAgICAgPC9kaXY+CiAgICAgICAgPGRpdj4KICAgICAgICAgIDxw PjI1PC9wPgogICAgICAgIDwvZGl2PgogICAgICAgIDxkaXY+CiAgICAgICAgICA8cD4yNjwvcD4K ICAgICAgICA8L2Rpdj4KICAgICAgICA8ZGl2PgogICAgICAgICAgPHA+Mjc8L3A+CiAgICAgICAg PC9kaXY+CiAgICAgICAgPGRpdj4KICAgICAgICAgIDxwPjI4PC9wPgogICAgICAgIDwvZGl2Pgog ICAgICAgIDxkaXY+CiAgICAgICAgICA8cD4yOTwvcD4KICAgICAgICA8L2Rpdj4KICAgICAgICA8 ZGl2PgogICAgICAgICAgPHA+MzA8L3A+CiAgICAgICAgPC9kaXY+CiAgICAgICAgPGRpdj4KICAg ICAgICAgIDxwPjMxPC9wPgogICAgICAgIDwvZGl2PgogICAgICAgIDxkaXY+CiAgICAgICAgICA8 cD5BcHIgMTwvcD4KICAgICAgICA8L2Rpdj4KICAgICAgICA8ZGl2PgogICAgICAgICAgPHA+Mjwv cD4KICAgICAgICA8L2Rpdj4KICAgICAgICA8ZGl2PgogICAgICAgICAgPHA+MzwvcD4KICAgICAg ICA8L2Rpdj4KICAgICAgICA8ZGl2PgogICAgICAgICAgPHA+NDwvcD4KICAgICAgICA8L2Rpdj4K ICAgICAgICA8ZGl2PgogICAgICAgICAgPHA+NTwvcD4KICAgICAgICA8L2Rpdj4KICAgICAgICA8 ZGl2PgogICAgICAgICAgPHA+NjwvcD4KICAgICAgICA8L2Rpdj4KICAgICAgICA8ZGl2PgogICAg ICAgICAgPHA+NzwvcD4KICAgICAgICA8L2Rpdj4KICAgICAgICA8ZGl2PgogICAgICAgICAgPHA+ ODwvcD4KICAgICAgICA8L2Rpdj4KICAgICAgICA8ZGl2PgogICAgICAgICAgPHA+OTwvcD4KICAg ICAgICA8L2Rpdj4KICAgICAgICA8ZGl2PgogICAgICAgICAgPHA+MTA8L3A+CiAgICAgICAgPC9k aXY+CiAgICAgICAgPGRpdj4KICAgICAgICAgIDxwPjExPC9wPgogICAgICAgIDwvZGl2PgogICAg ICAgIDxkaXY+CiAgICAgICAgICA8cD4xMjwvcD4KICAgICAgICA8L2Rpdj4KICAgICAgICA8ZGl2 PgogICAgICAgICAgPHA+MTM8L3A+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvc2VjdGlvbj4KICAg ICAgPHAgY2xhc3M9ImhlbHAtdGV4dCI+cHJlc3MgPyBmb3IgaGVscDwvcD4KICAgIDwvZGl2Pgog IDwvYm9keT4KPC9odG1sPg==