Как мне заставить мою сетку работать в Safari - PullRequest
Новая
       55

Как мне заставить мою сетку работать в Safari

0 голосов
/ 20 февраля 2020

Я построил простую раскладку с поддержкой пропорций, представляющую клавиатуру пианино. Он работает персиково в firefox и chrome, но в сафари он не работает, так как не заполняет доступное вертикальное пространство (см. Скриншоты).

Chrome / Firefox:

keyboard grid layout in chrome/firefox

Safari:

keyboard grid layout in safari

Есть мысли, почему это так и как я могу это исправить? Я много гуглил и нашел довольно много проблем, связанных с сеткой, связанных с сафари, но я не смог найти решение, которое решило бы мою проблему.

Codepen (сравните в chrome / firefox и сафари)

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>

S CSS: 

#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;
            }

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

1 Ответ

3 голосов
/ 20 февраля 2020

Чтобы соблюдать соотношение сторон в Safari, вам нужно не только объявить значение padding-bottom, но и установить высоту, равную нулю. Кроме того, установите родительский элемент UL равным родительской высоте 100%. С этими двумя дополнительными значениями это работает как шарм в сафари. См. Ниже код или 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;
...
...