Почему Safari искажает расчет размера фона с помощью макета сетки CSS? ⇐ CSS

[Гость]

Я столкнулся с проблемой при расчете размера фона в Safari при использовании макета сетки CSS. У меня есть контейнер сетки с фоновым изображением, установленным с помощью фонового изображения, и я пытаюсь изменить его размер с помощью фона, рассчитывая его на основе размера области просмотра и количества столбцов и строк сетки.
Вот упрощенная версия моего кода:
index.html:

Код: Выделить всё

Background Size Issue

body {
margin: 0;
padding: 0;
}

.grid-container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(22, minmax(0, 1fr));
grid-template-rows: repeat(12, minmax(0, 1fr));
background-image: url('./rectangle.svg');
background-size: calc(100vw / 22) calc(100vh / 12);
background-repeat: repeat;
}
.child-1 {
grid-column: span 9 / span 9;
background-color: rgba(255, 0, 0, 0.5);
}

.child-2 {
grid-column: span 1 / span 1;
background-color: rgba(134, 82, 48, 0.5);
}

.child-3 {
grid-column: span 1 / span 1;
background-color: rgba(48, 72, 134, 0.5);
}

.child-4 {
grid-column: span 1 / span 1;
background-color: rgba(134, 48, 48, 0.5);
}

.child-5 {
grid-column: span 9 / span 9;
background-color: rgba(0, 255, 0, 0.5);
}

.child-6 {
grid-column: span 1 / span 1;
background-color: rgba(251, 255, 0, 0.5);
}

rectangle.svg:

Код: Выделить всё

В большинстве браузеров, включая Chrome и Firefox, расчет размера фона работает должным образом. Однако в Safari фоновое изображение выглядит искаженным или не покрывает контейнер сетки должным образом.
Я пробовал корректировать расчеты, экспериментировать с различными единицами измерения и проверять наличие известных проблем. с рендерингом размера фона в Safari, но решение пока не найдено.
Версия браузера: Safari 17
Ожидаемое поведение:
Фоновое изображение должно покрывать контейнер сетки без искажений, при этом размер каждого повторяющегося сегмента изображения рассчитывается на основе размера области просмотра и макета сетки.
Фактическое поведение:
В Safari, фоновое изображение выглядит искаженным или не покрывает контейнер сетки должным образом.
Будем очень признательны за любые идеи и предложения по решению этой проблемы. Спасибо!
Chrome:

Safari:



Подробнее здесь: https://stackoverflow.com/questions/781 ... rid-layout