Свойство
background-attachment: fixed
несколько некорректно отображается на мобильных устройствах Apple. Но кроссбраузерное решение есть всегда!
Раз фон нормально не фиксируется, то блоки фиксируются точно. Именно на этом принципе основано следующее решение:
<!DOCTYPE html>
<html>
<head>
<title>Фиксированный фон для iOS</title>
</head>
<style>
body,
html {
position: absolute;
width: 100%;
height: auto;
margin: 0px;
padding: 0px;
top: 0;
left: 0;
min-height: 100%;
}
.fixed-crossbrowser-background {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-repeat: no-repeat;
background-position: bottom center;
background-image: url("background.jpg");
opacity: 1;
z-index: -1;
}
</style>
<body>
<div class="fixed-crossbrowser-background"></div>
<!--
*
* Далее весь остальной контент
*
-->
</body>
</html>Пожалуй, это самый приемлемый и рациональный вариант из тех, что мне приходилось применять для решения этой проблемы. Обошлось даже без javascript.
Если есть что добавить по теме
backgroud-fixed
на iOS или как зафиксировать фон для iphone и ipad, или возникли вопросы — форма для отправки комментария внизу.