I am encountering a difficulty with the background-size calculation in Safari when utilizing CSS grid structure. I’ve a grid container with a background picture set utilizing background-image, and I am attempting to measurement it utilizing background-size with a calculation based mostly on the viewport measurement and the variety of grid columns and rows.
Here is a simplified model of my code:
index.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta title="viewport" content material="width=device-width, initial-scale=1.0">
<title>Background Measurement Problem</title>
<type>
physique {
margin: 0;
padding: 0;
}
.grid-container {
width: 100vw;
peak: 100vh;
show: 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);
}
</type>
</head>
<physique>
<div class="grid-container">
<!-- Grid gadgets right here -->
</div>
</physique>
</html>
rectangle.svg:
<svg xmlns="http://www.w3.org/2000/svg" width="100" peak="100" viewBox="0 0 100 100" type="border: 1px strong black">
</svg>
In most browsers, together with Chrome and Firefox, the background-size calculation appears to work as anticipated. Nevertheless, in Safari, the background picture seems distorted or does not cowl the grid container correctly.
I’ve tried adjusting the calculation, experimenting with completely different items, and checking for any recognized points with Safari’s rendering of background-size, however have not discovered an answer but.
Browser Model: Safari [version number]
Anticipated Conduct:
The background picture ought to cowl the grid container with out distortion, with the dimensions of every repeating picture section calculated based mostly on the viewport measurement and the grid structure.
Precise Conduct:
In Safari, the background picture seems distorted or does not cowl the grid container correctly.
Any insights or ideas on learn how to resolve this situation could be significantly appreciated. Thanks!
Chrome:
Safari:
