Почему Safari искажает расчет фонового размера с макетом сетки CSS? ⇐ Html

[Anonymous]

Я сталкиваюсь с проблемой с расчетом размер фонового размера в Safari при использовании сетки CSS. У меня есть контейнер сетки с фоновым изображением, набор с использованием фонового изображения, и я пытаюсь размер его, используя размер фонового размера с расчетом на основе размера вида и количества столбцов и рядов.
Вот упрощенная версия моего кода: < /p>
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);
}









< /code>
rectangle.svg:


< /code>
В большинстве браузеров, включая Chrome и Firefox, расчет фонового размера, по-видимому, работает как и ожидалось. Однако в Safari фоновое изображение выглядит искаженным или не покрывает контейнер сетки должным образом. С рендерингом Safari с фоновым размером, но еще не нашел решение. > Фоновое изображение должно покрывать контейнер сетки без искажений, при этом размер каждого повторяющегося сегмента изображения, рассчитанного на основе размера вида и макета сетки. < /P>
Фактическое поведение:
in Safari, фоновое изображение выглядит искаженным или не охватывает контейнер сетки должным образом. Спасибо! Safari:


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