Размер фона на iOS

Question

Я провел утро, проводя исследование по следующей проблеме. Я делаю сайт на одной странице, используя множество изображений. Я знаю, что Safari известен своей странной обработкой привязки к фону: исправлено, но это нормально работает; моя проблема background-size:cover не работает в сочетании с fixed.

У меня есть 5 страниц, все из которых имеют height или min-height из 100%. Последняя страница фиксируется так:

#div5 { 
    height:100%; 
    width:100%; 
    position: relative; 
    background-image: url("img/background.jpg"); 
    background-attachment:fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

КСН (как в Chrome и Safari) фоновое изображение масштабируется, чтобы покрыть всю веб-страницу, так что это действительно растянуты.

В то же время, страница 4 имеет следующий CSS:

#div4 { 
    min-height:100%; 
    width:100%; 
    background:url(img/portfoliobg.jpg); 
    overflow: auto; 
    background-size: cover; 
} 

и это работает как шарм.

Итак, что-то заставляет браузер вести себя странно при объединении fixed и cover. У кого-нибудь есть решение?

Answer 1

Используйте другой div с position:fixed, чтобы сделать фон фиксированным.

Как это: http://codepen.io/anon/pen/OVebNg

JADE

.fixed 
    .bgcover 

SCSS

.fixed { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    .bgcover { 
     background-image: url('http://globe-views.com/dcim/dreams/winter/winter-04.jpg'); 
     background-size: cover; 
    width: 100%; 
    height: 100%; 
    } 
} 

Надеется, что это поможет.