SVG на телефоне не прогружаются

Question

У меня проблемы с SVG картинками, которые почему то пропадают

На компьютере всё нормально (даже если сжимать разрешение НА компьютере - тоже норм).

Но когда запускаю на телефоне сайт, то некоторые SVG не прогружаются или фрагменты в одном SVG не прогружаются. Сколько не находишься на сайте - они никогда не прогрузятся, но если проскроллить до какого-то момента, все svg встают на своё место и прогружены - так, как и должно быть. Но почему в начале они не прогружаются? Выглядит стрёмно.

Вот пример, как я делаю один из SVG, который пропадает:

header {
        top: 0;
        left: 0;
        background-image: url(../img/burger-background.svg);
        background-repeat: no-repeat;
        width: 179px;
        height: 127px;
        border-radius: 0;
        background-color: transparent;
        transition: 0.5s ease;
    }

SVG:

<svg 
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 360 255">
<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
 d="M0.000,223.000 L0.000,-0.000 L323.000,-0.000 C323.000,-0.000 400.864,190.143 328.000,234.000 C241.532,286.046 0.000,223.000 0.000,223.000 Z"/>
</svg>

Странно, что на ПК работает адаптив прекрасно, как угодно сжимая экран, а на телефоне эти SVG исчезают (но при этом также всё работает по адаптиву, не считая SVG). Также странно, что проскролливая до опред. момента SVG опять появляются и дальше нормально.

На ПК и на телефоне Google Chrome

Заранее спасибо

БЛОГ НА HUSL

SVG на телефоне не прогружаются

Ответы (0 шт):