While testing a webpage on Chrome and Safari iOS, I encountered an interesting issue. When applying the CSS class below, Chrome displays the page with a pseudo-checkboard pattern checkered background, whereas Safari on iOS does not show the pattern at all missing background pattern. It appears that there might be a problem caused by using "repeating-linear-gradient" twice in this context. Any suggestions or tips to resolve this inconsistency?
#background {
opacity: 0.8;
background-color: var(--ion-color-dark);
background-image: repeating-linear-gradient(
45deg,
var(--theme-primary-color) 25%,
rgba(255, 255, 255, 0) 25%,
rgba(255, 255, 255, 0) 75%,
var(--theme-primary-color) 75%,
var(--theme-primary-color)
),
repeating-linear-gradient(
45deg,
var(--ion-toolbar-background) 25%,
#ffffff 25%,
#ffffff 75%,
var(--ion-toolbar-background) 75%,
var(--ion-toolbar-background)
);
background-position: 0 0, 40px 40px;
background-size: 80px 80px;
}