Safari не соблюдает отображаемое свойство для элемента SUMMARY

Question

display: grid неправильно применяется к элементу summary ниже в Safari. В современных Edge, Chrome и Firefox столбцы расположены рядом (используется сетка CSS). В Safari столбцы имеют полную ширину и стек.

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  justify-content: start;
  justify-items: stretch;
}

.card {
  background: #eee;
  border-radius: 4px;
}

[class*="col"] {
  display: block;
  padding: 3px 6px;
  box-sizing: border-box;
}

.col-2 {
  grid-column: span 2;
}

.col-10 {
  grid-column: span 10;
}

details .indicator::after {
   content: '+';
}

details[open] .indicator::after {
   content: '-';
}

<details>
  <summary class="grid card">
    <div class="col-10">Click to View More</div>
    <div class="col-2 indicator"></div>
  </summary>
  <div class="contents">
    Here's the amazing contents that are displayed when details are expanded.
  </div>
</details>

Я разработал следующий обходной путь, но мне интересен тот, который не требует дополнительного элемента.

<summary class="card">
    <div class="grid"> <!-- <-- I don't want this -->
        <div class="col-10">Click to View More</div>
        <div class="col-2 indicator"></div>
    </div>
</summary>