Safari Gives unexpected results with (I think) use of repeat auto #57

akc42 · 2019-12-19T13:26:50Z

Not sure what is the cause of this, but the following html page fails with Safari - all the buttons get put to the bottom right hand cell instead of spread out in the grid. I have been unable to find any reference to this difference elsewhere.

<!--
    @licence
    Copyright (c) 2019 Alan Chandler, all rights reserved
    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and 
    associated documentation files (the "Software"), to deal in the Software without restriction, including 
    without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 
    copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the 
    following conditions:

      - The above copyright notice and this permission notice shall be included in all copies or substantial 
        portions of the Software.

      - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT 
        LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN 
        NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 
        WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 
        SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes, shrink-to-fit=no">
    <title>Grid Issue</title>

    <style>
      html {
        background: #ffffff;
      }

      body {
        margin: 0;
        min-height: 100vh;
        font-family: sans-serif;
        line-height: 1.5;
        letter-spacing: 0.1em;
        background-color: #fafafa;
        color: #333;
      }

    </style>

  </head>
  <body>
      <style>
        :root {
          --pas-button-menu-height: 70px;
          --pas-button-menu-width:  225px;
        }

        .menu-card {
          grid-template-rows: auto repeat(4, minmax(var(--pas-menu-button-height), auto));
        }

        .three {
          grid-template-rows: auto repeat(4, minmax(var(--pas-menu-button-height), auto));
          grid-template-columns: repeat(4,var(--pas-menu-button-width));
          grid-template-areas:
            ". selector . ."
            "gridareaa1 gridareaa2 gridareaa3 gridareaa4"
            "gridareab1 gridareab2 gridareab3 gridareab4"
            "gridareac1 gridareac2 gridareac3 gridareac4"
            "gridaread1 gridaread2 gridaread3 gridaread4";
        }
        .selectors {
          display: flex;
          flex-direction: column;
        }

        .three .selectors {
          grid-area: selector;
        }
        #gridareaa1_portrait {
          grid-area: gridareaa1;
        }
        #gridareaa2_portrait {
          grid-area: gridareaa2;
        }
        #gridareaa3_portrait {
          grid-area:gridareaa3;
        }
        #gridareaa4 {
          grid-area: gridareaa4;
        }
        #gridareab1 {
          grid-area: gridareab1;
        }
        #gridareab2 {
          grid-area: gridareab2;
        }
        #gridareab3 {
          grid-area: gridareab3;
        }
        #gridareab4 {
          grid-area: gridareab4
        }
        #gridareac1 {
          grid-area: gridareac1;
        }
        #gridareac2 {
          grid-area: gridareac2;
        }
        #gridareac3 {
          grid-area: gridareac3;
        }
        #gridareac4 {
          grid-area: gridareac4;
        }
        #gridaread1 {
          grid-area: gridaread1;
        }
        #gridaread2 {
          grid-area: gridaread2;
        }
        #gridaread3 {
          grid-area: gridaread3;
        }
        #gridaread4 {
          grid-area: gridaread4;
        }
        section.menu-container {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        section.menu-container > .menu-card {
          margin: 40px 0 20px 0;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0px 0px 38px -2px rgba(0,0,0,0.5);
            background-color: white;
            display: grid;
            grid-gap: 30px;

        }
      </style>
      <section class="menu-container">
          <div class="menu-card three">

              <div class="selectors">
                <input id="startdate" type="date" label="Start Date" .value="1/11/2019"></input>
                <input id="enddate" type="date"label="End Date" .value="30/11/2019" ></input>
              </div>


              <button id="gridareaa1_portrait" >Button A1</button>
              <button id="gridareaa2_portrait">Button A2</button>
              <button id="gridareaa3_portrait">Button A3</button>
              <button id="gridareaa4" >Button A4</button>
              <button id="gridareab1">Button B1</button>
              <button id="gridareab2">Button B2</button>
              <button id="gridareab3">Button B3</button>
              <button id="gridaread2">Button D2</button>
              <button id="gridareac4">Button C4</button>
              <button id="gridareac1">Button C1</button>
              <button id="gridareac2">Button C2</button>
              <button id="gridaread1">Button D1</button>
              <button id="gridaread3">Button D3</button>
              <button id="gridaread4">Button D4</button>
              <button id="gridareac3">Button C3</button>
              <button id="gridareab4">Button B4</button>
          </div>
        </section>
  </body>
</html>

A demo of this is available here http://codepen.io/akc42/pen/gObLLod

The text was updated successfully, but these errors were encountered:

akc42 · 2020-01-01T14:55:42Z

My apologies. Its my test case that is screwed. The CSS variable is named --pas-button-menu-height in the declaration and --pas-menu-width-height in the use. Same is true with the width

akc42 · 2020-01-02T07:36:52Z

Having explored a bit more the issue is still there - its the use of auto-fill that causes the difference.
I have fixed the demo pen. IOS fails regardless of which browser, chrome and firefox on linux both work fine. Chrome and Firefox on Mac works, Safari on Mac fails.
https://codepen.io/akc42/pen/gObLLod
and here is a pen with a workaround (since I know the number of rows - as I do in the application where I first discovered this problem)
https://codepen.io/akc42/pen/NWPammZ

This is with IOS 13.3 and MacOS 10.14.6 (Safari 13.0.4)

gsnedders · 2020-02-26T23:44:05Z

@akc42 https://codepen.io/gsnedders/pen/qBdrgbm?editors=1100 is a further reduced TC (I literally started with yours and kept on removing stuff while Safari and Firefox rendered it differently).

There are two things here: one is that the item is ending up in the first row after the template areas, and the second is that something very weird is happening with the used value of grid-template-rows.

As far as I can tell, this is unreported in the WebKit bug tracker; you should go do that!

akc42 · 2020-03-04T10:34:56Z

I did submit a bug

akc42 closed this as completed Jan 1, 2020

akc42 reopened this Jan 2, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Safari Gives unexpected results with (I think) use of repeat auto #57

Safari Gives unexpected results with (I think) use of repeat auto #57

akc42 commented Dec 19, 2019

akc42 commented Jan 1, 2020

akc42 commented Jan 2, 2020 •

edited

gsnedders commented Feb 26, 2020 •

edited

akc42 commented Mar 4, 2020

Safari Gives unexpected results with (I think) use of repeat auto #57

Safari Gives unexpected results with (I think) use of repeat auto #57

Comments

akc42 commented Dec 19, 2019

akc42 commented Jan 1, 2020

akc42 commented Jan 2, 2020 • edited

gsnedders commented Feb 26, 2020 • edited

akc42 commented Mar 4, 2020

akc42 commented Jan 2, 2020 •

edited

gsnedders commented Feb 26, 2020 •

edited