gridbugs
gridbugs copied to clipboard
rachelandrew
Safari Gives unexpected results with (I think) use of repeat auto
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
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
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)
@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!
