Encountering an issue with a css grid layout.
The grid container is positioned absolutely and the grid-template-rows includes a 1fr to allocate space for one row to take up all available space.
While this renders correctly on most browsers, it fails to display properly on the latest version of Safari in macOS 10.13.2
The problem appears to be related to the calculation of free space when the height is not explicitly set.
Is there something I am overlooking or is there a workaround available?
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: grid;
grid-template-rows: 1fr 150px;
grid-template-columns: 1fr 150px;
grid-template-areas: "a b" "c d";
}
.wrapper>div {
outline: solid 1px #aaa;
padding: 10px;
}
.game {
grid-area: a;
}
.player {
grid-area: b;
}
.rules {
grid-area: d;
}
.controls {
grid-area: c;
}<div class="wrapper">
<div class="game">game</div>
<div class="player">player</div>
<div class="rules">rules</div>
<div class="controls">controls</div>
</div>