CSS CSS сетка элементов iOS

Question

iPad с последней версией Chrome (71.0.3578.89) показывает простую сетку в виде элементов блока.

@media (min-width: 720px){
      .grid-container
      {
          position: static;
          height: auto;
          display: -ms-grid;
          display: grid;
          -ms-grid-columns: 1fr 15px 1fr 15px 1fr;
          grid-template-columns: auto auto auto;
          grid-template-rows: auto auto;
          grid-column-gap: 15px;
          white-space: normal;
      }

      .grid-card{
          display: block;
          margin: 0 0 25px;
          padding: 30px 20px;
          width: 230px;
          height: auto;
          transform: scale(1);
          border: 1px solid transparent;
          box-shadow: 0 2px 15px 0 rgba(0,0,0,.2);
          transform-origin: center;
          white-space: normal;
      }

  }

<div class="grid-container">
        <div class="grid-card"><h3>A Title</h3><p>And some text in here</p></div>
        <div class="grid-card"><h3>A Title</h3><p>And some text in here</p></div>
        <div class="grid-card"><h3>A Title</h3><p>And some text in here</p></div>
        <div class="grid-card"><h3>A Title</h3><p>And some text in here</p></div>
        <div class="grid-card"><h3>A Title</h3><p>And some text in here</p></div>
        <div class="grid-card"><h3>A Title</h3><p>And some text in here</p></div>
</div>

(в мобильных размерах есть макет без сетки, это все стили, применяемые в этом размере)

На iPad у меня естьдля тестирования элементы просто складываются так, как если бы они были обычными блочными элементами:

[]
[]
[]
[]
[]
[]

вместо сетки:

[] [] []
[] [] []

Что очень странно, потому что это работаетлюбой другой браузер (включая новый IE и другие устройства с Chrome) без проблем.Я не смог найти каких-либо специфичных для устройства ошибок, сообщивших об этой проблеме, и у меня нет идей.Кажется, что нигде нет проблем совместимости версий с CSS Grid и Chrome ...

У кого-нибудь есть мысли по поводу того, что с этим делать?