How can I get my grid layout to work in Safari

Question

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).

Chrome/Firefox:

Safari:

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.

Codepen (compare in chrome/firefox vs. safari)

https://codepen.io/ChrisVomRhein/pen/RwPGYrM

HTML:

<div id="keyboard">
    <ul>
        <li id="key-c" class="keys-white button" data-name="c">key-c</li>
        <li id="key-d" class="keys-white button" data-name="d">key-d</li>
        <li id="key-e" class="keys-white button" data-name="e">key-e</li>

        <!-- [...] -->

        <li id="key-cis" class="keys-black button" data-name="cis">key-cis</li>
        <li id="key-dis" class="keys-black button" data-name="dis">key-dis</li>

        <!-- [...] -->
    </ul>
</div>

SCSS:

#keyboard {
    /* maintain aspect ratio */
    position: relative;
    padding-bottom: 25%;

    > 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);

        > li {
            font-size: 0;
            grid-row: 1 / 3;
            border: 2px solid $color-dark;
            grid-column-end: span 3;

            &.keys-white {
                border-width: 2px 1px;
                background-color: white;
                z-index: 10;
            }

            &.keys-black {
                grid-row: 1 / 2;
                background-color: $color-dark;
                z-index: 100;
                grid-column-end: span 2;
            }

            &#key-c {
                border-left-width: 2px;
                grid-column-start: 1;
            }

            &#key-d {
                grid-column-start: 4;
            }

            &#key-e {
                grid-column-start: 7;
            }

            /* [...] */

            &#key-cis {
                grid-column-start:  3;
            }

            &#key-dis {
                grid-column-start:  6;
            }

            /* [...] */
        }
    }
}

Answer 1

In order to respect the aspect ratio in Safari, you'll need not only to declare padding-bottom value but also set height equal to zero. Also, set parent UL element equal to parent 100% height. With those two additional values, it works like a charm on safari. See below the code or codepen.

#keyboard {
  /* maintain aspect ratio */
  position: relative;
  padding-bottom: 25%;
  height: 0; // add this

  > ul {
    /* stretch ul to keyboard div */
    position: absolute;
    height: 100%; // add this
    top: 0;
...