URL: 4genderjustice.org
Это отлично работает во всех браузерах (насколько я могу судить), кроме Firefox. Возникает вопрос: почему в Firefox не работает?
Фоновые изображения настроены следующим образом:
#top .homepage-cover-photo{
position: relative;
}
#top .homepage-cover-photo .x-container {
position: absolute;
clip: none;
clip-path: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
}
#top .homepage-cover-photo .x-column.x-1-1 .bgimg {
position: absolute;
background-attachment: fixed;
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -3;
}
Это должно нормально отображаться в большинстве современных браузеров.
(Фактические фоновые изображения устанавливаются в отдельных элементах .bgimg.)
Однако из-за того, что Chrome / Webkit / Blink (не уверен на 100%, я думал, что это Blink, но это также происходит в браузерах webkit) не отображает их правильно, я добавил исправление, описанное здесь:
.Chrome #top .homepage-cover-photo .x-container,
.Opera #top .homepage-cover-photo .x-container,
.iPhone #top .homepage-cover-photo .x-container,
.iPad #top .homepage-cover-photo .x-container,
.Safari #top .homepage-cover-photo .x-container {
clip: rect(auto,auto,auto,auto);
clip-path: rect(auto,auto,auto,auto);
-webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%);
}
.Chrome #top .homepage-cover-photo .x-column.x-1-1 .bgimg,
.Opera #top .homepage-cover-photo .x-column.x-1-1 .bgimg,
.iPhone #top .homepage-cover-photo .x-column.x-1-1 .bgimg,
.iPad #top .homepage-cover-photo .x-column.x-1-1 .bgimg,
.Safari #top .homepage-cover-photo .x-column.x-1-1 .bgimg {
position: fixed;
background-attachment: scroll;
-webkit-transform-style: preserve-3d;
}
Это делается с помощью обнюхивания браузера (извините, но это единственное решение, которое, как мне кажется, работает).
