Я использую svg изображение как background-image на моем веб-сайте, однако я заметил, что изображение не отображается правильно в сафари (я использую последнюю версию сафари в Mac OS High Sierra). Действительно, изображение в Safari размытое / pixelateryd, но не в Chrome или Firefox. Я предполагаю, что это ошибка самого сафари, но мне интересно, есть ли исправление для этого.
Я уже пробовал несколько вещей, таких как изменение свойства background-size и background-repeat, а также изменение preserveAspectRatio в моем файле svg с другими значениями, однако это не решает проблему.
Вот мой css для элемента, который я пытаюсь исправить:
.intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: white;
background: url(../img/pattern.svg);
background-color: black;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
Вот мой файл SVG: https://obrassard.ca/img/pattern.svg
Большое спасибо!