如何让我的网格布局在 Safari 中工作

Question

我已经构建了一个表示钢琴键盘的保持纵横比的简单网格布局。它在 firefox 和 chrome 中运行良好，但在 safari 中表现平平，因为它没有填满可用的垂直空间（见屏幕截图）。

Chrome/Firefox：

Safari：

有什么想法为什么会这样以及我该如何解决？我搜索了很多，发现了很多与 safari 相关的网格相关问题，但我找不到可以解决我的问题的解决方案。

Codepen（在 chrome/firefox 与 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

为了尊重 Safari 中的纵横比，您不仅需要声明 padding-bottom 值，还需要将高度设置为零。此外，将父 UL 元素设置为等于父 100% 高度。有了这两个附加值，它就像 safari 的魅力一样。请参阅下面的代码或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;
...