background: cover not scaling на мобильных браузерах

Question

Проект, над которым я работаю, представляет собой 1-страничный веб-сайт, разделенный на разделы, первый раздел - это мачта с нанесенным на него фоном. Моя цель - сделать это изображение чувствительным к изменению размера, поэтому я установил свойство background-size в cover

При масштабировании окна просмотра в браузере рабочего стола изображение масштабируется соответствующим образом. Однако на мобильных клиентах (протестированных на iOS 7 и Andriod Froyo/Kitkat) изображение, похоже, остается на полной ширине/высоте, становясь очень пиксельным и искаженным.

пример: http://www.bardiadoust.ca

Сначала я думал, что проблема была с -500% маржи и 500% заполнения я имел на левой/правой части каждой секции (я использую это для создания полных секций шириной в то время как сохраняя содержимое внутри моей сетки). Я вынул этот код и все еще получал тот же результат. Если кто-нибудь подскажет, что я делаю неправильно, это было бы здорово.

Update

Я делал более расследование и думал, что это может быть проблемой IOS из-за ограничений размера изображения (Read More Here) и выгружена мой довольно большой 1.2Mb изображение с 500k GIF. Однако проблема сохраняется.

Update 2

Не нашли полное решение, но я нашел затруднительное я доволен.

В моих глобальных стилях я эти свойства фона установить на .masthead раздел:

background: $tangerine; 

background: 
    linear-gradient(
    rgba(232,85,4, .84), 
    rgba(232,85,4, .84) 
), 

url("../images/pano2.png") no-repeat center center; 
    -webkit-background-attachment: fixed; 
    -moz-background-attachment: fixed; 
    -o-background-attachment: fixed; 
    -ms-backgroudn-attachment: fixed; 
    background-attachment: fixed; 

    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

На моей первого медиа точки разрыва запроса я применить эти стили к .masthead:

@media only screen and (max-width: 959px){ 
    -webkit-background-attachment: scroll; 
    -moz-background-attachment: scroll; 
    -o-background-attachment: scroll; 
    -ms-backgroudn-attachment: scroll; 
    background-attachment: scroll; 
    -webkit-background-size: contain; 
    -moz-background-size: contain; 
    -o-background-size: contain; 
    background-size: contain; 
} 

contain кажется чтобы дать мне результат на мобильном телефоне, который я ищу, но только если свойство background-attachment не установлено в fixed. Это не было слишком большим для меня, поскольку фиксированные фоны на самом деле не работают должным образом на мобильных устройствах.

Answer 1

Я, наконец, нашел решение этой проблемы, и я отправляю ее здесь в надежде, что это поможет кому-то еще.

В то время как я изначально считал, что моя проблема в том, что background-size не масштабировался должным образом, похоже, проблема была связана с background-attachment: fixed. У обоих из этих свойств было плохое масштабирование фона, а также не было исправлено изображение на месте, пользовательские свитки (вид потери/потери ситуации).

Есть несколько законных обратных ссылок на этот метод. Я впервые узнал об этом в блоге Four Kitchens, и кредит для Криса Руппеля объясняет это.(Original Article)

Почему это не работает

Крис идет в гораздо более подробно о том, почему position: fixed не работает на элементах фона в мобильных браузерах имеет отношение к количеству перерисовки браузер будет нужно делать и как это негативно влияет на производительность. Из-за этого свойство background-attachment не работает должным образом в мобильных браузерах.

Решение

Основная идея этого метода состоит в установке фонового изображения, как обычно, но вместо установки свойства вложения в fixed, добавить position:fixed к самому DIV, эффективно фиксируя его верхний/левый элемент тела.

По существу совмещая это с will-change собственности создает новый слой краски для мобильных устройств, чтобы сделать фон (по существу делает то же самое, как translateZ (0)), без урчания/джампинга (результата вы часто получаете при попытке для этого с Javascript). Пожалуйста, прочитайте связанную статью для получения дополнительной информации об этой технике.

HTML:

<section class="masthead"> 
    ... 
</section> 

CSS:

.masthead { 
    overflow: hidden; // added for pseudo-element 
    position: relative; // added for pseudo-element 

// Fixed-position background image 
    &::before { 
     content: ' '; 
     position: fixed; // instead of background-attachment 
     width: 100%; 
     height: 100%; 
     top: 0; 
     left: 0; 
     background: url('/img/front/strategy.jpg') no-repeat center center; 
     background-size: cover; 
     will-change: transform; // creates a new paint layer 
     z-index: -1; //ensures image is behind everything else 
    } 
} 

Следует отметить, что в то время как Крис поставил overflow и position свойства на родительский элемент, из моего исследования они не имеют никакого эффекта. Относительное позиционирование не относится к фиксированным элементам, и переполнение не происходит.

Недостатки

Этот метод корректно работает на моем тестировании, но есть несколько причин, почему вы не можете захотеть использовать его:

• Отсутствие контроля переполнения: Из-за этот DIV фиксируется относительно окна просмотра, overflow:hidden не действует. Это означает, что вы не можете «закрепить» изображение, чтобы оно было в его контейнере div, оно всегда будет заполнять весь фон. Обычно это не будет проблемой на практике, так как любой другой контент под номером <section class="masthead"> будет поверх изображения (эффективно скрывая его под остальной частью контента). Однако, если по какой-то причине вам нужно обрезать/обрезать фоновое изображение, чтобы не занять весь фон, вы можете попробовать использовать свойство clip. See the second answer to this question

• Видимый на свитке (Safari): Это чисто эстетическая вещь, но из-за «бодрый» прокрутки в браузере Safari, если вы перечисляете мимо верхней или нижней части страницы, фон будет подглядывать , Этого не происходит в Chrome, просто Safari.

• одно изображение на странице: Кто-то, возможно, понял это, а потому, что div это фоновое изображение прилагается к фиксировано относительно окна просмотра (при х: 0, у: 0), я могу» t найти способ добавить несколько фиксированных изображений как часть 1 страницы. Проблема заключается в том, что он просто складывается поверх (или сзади в зависимости от его z-индекса) предыдущего изображения.Установка значения top в значение жесткого кодированного пикселя/рема/em приведет к его перемещению вниз, но нет способа точно знать, как далеко он должен двигаться вниз, чтобы выстроить свой контент (особенно на чувствительном сайте, где контент высота никогда не фиксируется).

• Тип hacky: Хотя это полностью работает, и я даже использую его в текущем проекте, над которым я работаю. Он чувствует себя взломанным. background-attachment: fixed чувствует, что это должно быть лучшим решением для этого, если он сработает.

Answer 2

Вы настроили так, чтобы ваши селекторы CSS вызывали для каждого браузера? Некоторые из новых CSS3 атрибутов и селекторы требуют префиксы для того, чтобы работать кросс-браузер:

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/post_bg.jpg', sizingMethod='scale')"; 

Если это не сделать трюк, я думаю, вы могли бы быть в состоянии установить его с помощью background-size contain; в видовых для меньшие размеры экрана.