В iOs устройствах background-attachment: fixed; не работает, поэтому я нашел обходной путь, используя правило @supports CSS.
Это работало должным образом на сайте testground, но когда я попытался применить его на основной сайт css это не сработало.
На сайте тестирования я применил его непосредственно к <head> следующим образом:
<style>
.paral2 {
min-height: 300px;
background-attachment: fixed;
background-size: auto;
background-position: center;
background-repeat: no-repeat;
}
@supports (-webkit-touch-callout: none) {
.paral2 {
min-height: 300px;
background-attachment: scroll;
background-size: auto;
background-position: center;
background-repeat: no-repeat;
}
}
</style>
Но на основном сайте у меня было использовать (по требованию клиента) файл style.css, поэтому я применил его так:
@supports (-webkit-touch-callout: none) {
.paral {
min-height: 300px;
background-attachment: scroll;
background-size: auto;
background-position: center;
background-repeat: no-repeat;
}
}
.paral {
min-height: 300px;
background-attachment: fixed;
background-size: auto;
background-position: center;
background-repeat: no-repeat;
}
И он не работает, я понятия не имею, почему, я полностью потерян.
Может быть уместным, в файле style.css правило @supports и его следующие элементы выглядят странно, см. Рисунок ниже:
Только первое Элемент класса .paral окрашен в желтый цвет.
Любая помощь будет принята с благодарностью и, как всегда, заранее.