Почему не работает background-image на мобильных устройствах?

Question

[Viktor Burdale]

Есть красивый градиент background для body. Применяется классом. Работает на всех браузерах, кроме мобильных. Префиксы написал. Подскажите, что я упустил?

body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    font-weight: 100;
    color: #fff;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: top center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.style1 {
    background-image: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), -webkit-radial-gradient(70% 60%, ellipse, #c3e060 0%, rgba(195, 224, 96, 0) 30%), -webkit-radial-gradient(bottom left, ellipse, #00a3cb 0%, rgba(0, 163, 203, 0) 70%), -webkit-linear-gradient(315deg, rgba(18, 46, 119, 0) 0%, rgba(18, 46, 119, 0) 75%, #122e77 100%), -webkit-linear-gradient(left, #625793 0%, #d55d64 17%, #e49129 74%, #c0671c 100%);
    background-image: -o-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), -o-radial-gradient(70% 60%, ellipse, #c3e060 0%, rgba(195, 224, 96, 0) 30%), -o-radial-gradient(bottom left, ellipse, #00a3cb 0%, rgba(0, 163, 203, 0) 70%), -o-linear-gradient(315deg, rgba(18, 46, 119, 0) 0%, rgba(18, 46, 119, 0) 75%, #122e77 100%), -o-linear-gradient(left, #625793 0%, #d55d64 17%, #e49129 74%, #c0671c 100%);
    background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(ellipse at 70% 60%, #c3e060 0%, rgba(195, 224, 96, 0) 30%), radial-gradient(ellipse at bottom left, #00a3cb 0%, rgba(0, 163, 203, 0) 70%), linear-gradient(135deg, rgba(18, 46, 119, 0) 0%, rgba(18, 46, 119, 0) 75%, #122e77 100%), linear-gradient(to right, #625793 0%, #d55d64 17%, #e49129 74%, #c0671c 100%);
    background-blend-mode: screen, hue, color, overlay, normal;
}

Comments

[Алексей Уколов]

В каких конкретно браузерах проблема?

[shmatuan]

Почти во всех должно работать
https://caniuse.com/#feat=css-repeating-gradients

[Viktor Burdale]

shmatuan, Знаю.. Но не работает.. Проблема в самом градиенте, только не понял в чем именно.. Потому, что к примеру это градиент работает везде:

.style4 {
    background-image: linear-gradient(to right, rgb(253, 200, 48), rgb(243, 115, 53));
}

[shmatuan]

У меня работает и тот код - может что-то другое не работает?

Answer 1

[Viktor Burdale]

Понял, в чем проблема. Градиент не работает из-за этой строки:

background-blend-mode: screen, hue, color, overlay, normal;

Нет поддержки..

Answer 2

[Сергей Горячев]

background-attachment: fixed;
Не работает фиксация фона таким образом, на айфонах знаю точно.
Background-attachment: fixed на ios — как победить?
Решается дополнительным дивом с абсолютным / фиксированным позиционированием.
https://stackoverflow.com/questions/21476380/backg...

Comments

[Viktor Burdale]

Фиксация фона работает. Проверил и в safari и google chrome на iphone. Проблема в самом градиенте, только не понял в чем именно.. Потому, что к примеру это градиент работает везде:

.style4 {
    background-image: linear-gradient(to right, rgb(253, 200, 48), rgb(243, 115, 53));
}