title: How can I get my grid layout to work in Safari
body: <p>I have built an aspect-ratio-maintaining simple grid layout representing a piano keyboard. It works peachy in firefox and chrome, but it falls flat in safari, as it doesn't fill the available vertical space (see screenshots).</p>
  
  <p><strong>Chrome/Firefox:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/cY2ew.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cY2ew.png" alt="keyboard grid layout in chrome/firefox"></a></p>
  
  <p><strong>Safari:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/qiSeE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qiSeE.png" alt="keyboard grid layout in safari"></a></p>
  
  <p>Any thoughts why that is and how I can fix it? I googled a lot and found quite a few grid-related issues concering safari, but I couldn't find a solution that would solve my problem.</p>
  
  <p><strong>Codepen (compare in chrome/firefox vs. safari)</strong></p>
  
  <p><a href="https://codepen.io/ChrisVomRhein/pen/RwPGYrM" rel="nofollow noreferrer">https://codepen.io/ChrisVomRhein/pen/RwPGYrM</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="keyboard"&gt;
      &lt;ul&gt;
          &lt;li id="key-c" class="keys-white button" data-name="c"&gt;key-c&lt;/li&gt;
          &lt;li id="key-d" class="keys-white button" data-name="d"&gt;key-d&lt;/li&gt;
          &lt;li id="key-e" class="keys-white button" data-name="e"&gt;key-e&lt;/li&gt;
  
          &lt;!-- [...] --&gt;
  
          &lt;li id="key-cis" class="keys-black button" data-name="cis"&gt;key-cis&lt;/li&gt;
          &lt;li id="key-dis" class="keys-black button" data-name="dis"&gt;key-dis&lt;/li&gt;
  
          &lt;!-- [...] --&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>SCSS:</strong></p>
  
  <pre><code>#keyboard {
      /* maintain aspect ratio */
      position: relative;
      padding-bottom: 25%;
  
      &gt; ul {
          /* stretch ul to keyboard div */
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
  
          display: grid;
          grid-template-rows: repeat(2, 1fr);
          grid-template-columns: repeat(45, 1fr);
  
          &gt; li {
              font-size: 0;
              grid-row: 1 / 3;
              border: 2px solid $color-dark;
              grid-column-end: span 3;
  
              &amp;.keys-white {
                  border-width: 2px 1px;
                  background-color: white;
                  z-index: 10;
              }
  
              &amp;.keys-black {
                  grid-row: 1 / 2;
                  background-color: $color-dark;
                  z-index: 100;
                  grid-column-end: span 2;
              }
  
              &amp;#key-c {
                  border-left-width: 2px;
                  grid-column-start: 1;
              }
  
              &amp;#key-d {
                  grid-column-start: 4;
              }
  
              &amp;#key-e {
                  grid-column-start: 7;
              }
  
              /* [...] */
  
              &amp;#key-cis {
                  grid-column-start:  3;
              }
  
              &amp;#key-dis {
                  grid-column-start:  6;
              }
  
              /* [...] */
          }
      }
  }
  </code></pre>