.wrap {
position: absolute;
z-index: 777;
top: 100%;
left: 0;
width: 100%;
min-height: 100%;
background-color: white;
-webkit-overflow-scrolling: touch;
-moz-transform: translateX(25%);
-webkit-transform: translateX(25%);
-o-transform: translateX(25%);
-ms-transform: translateX(25%);
transform: translateX(25%);
}
section {
position: relative;
width: 100%;
display: table;
height: 450px;
border-bottom: 2px solid #E6EAED;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 20px;
background-color: #333;
background-repeat: repeat;
background-position: center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
background-image: url('http://placekitten.com/600/600');
}
См. Вышеупомянутую скрипку. Я использую аналогичную структуру в проекте, над которым я работаю. Это страница с чередующимися секциями, одна для контента и одна, действующая как разделитель с покрытием и фиксированным фоном.
Хорошо работает, но по какой-то причине при применении перевода к элементу с фиксированным фоном или его родительским фоном фон полностью исчезает или оставляет некоторые артефакты и части изображения.
Прекрасно работает в любом другом браузере. Не повезло найти решение, поэтому я надеюсь, что кто-то может мне помочь.
Заранее спасибо!