Background-attachment: фиксированное вмешательство в размер фона

У меня есть фоновое изображение, масштабируемое для его внутри контейнера, и у меня есть соответствующие резервные копии (не показаны), когда Modernizr обнаруживает, что браузер не поддерживает фоновый размер.

.wrap {
    width: 200px;
    height: 116px;
    position: absolute;
    background-image: url(image.jpg);
    background-attachment: fixed;
    background-position: 0 0;
    background-size: 200px 116px;
    background-repeat: no-repeat;
}

Вот пример: http://jsfiddle.net/crowjonah/6xYNm/

Он выглядит красиво в Chrome, Firefox, Safari (рабочий стол и iOS), однако у меня возникают проблемы с некоторыми экземплярами Android.

Здесь UA для устройства, которое отображается правильно:

Mozilla/5.0 (Linux; U; Android 4.0.4; en-us; Xoom Build/IMM76L) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30

и здесь UA для устройства, которое не выполняет:

Mozilla/5.0 (Linux; U; Android 4.2.2; en-us; sdk Build/JB_MR1.1) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

Более новая версия Android (эмулируется) масштабирует фиксированное фоновое изображение, которое должно быть выдуто и пиксельно, чтобы соответствовать (я думаю) видовому экрану и не учитывает размер его контейнера или определенный background-size.

И это все прекрасно. Фактически, то, что MDN говорит, произойдет:

Если фоновая привязка зафиксирована, то область фонового позиционирования - это вся область окна браузера, не включая область, покрытую полосами прокрутки, если они присутствуют.

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

Обновление (10/3/2013): Чтобы предотвратить путаницу, я обновил скрипт, чтобы продемонстрировать более реалистичный и проблематичный пример, который оправдывает больше свойств CSS, которые я определил: http://jsfiddle.net/crowjonah/QtpVN/

Ответ 1

вы можете подготовить CSS в двух классах .works {...} и .does_not_work {...}, а затем проверить вещи через JavaScript, чтобы ответить на вопрос, в каком случае вы столкнулись. В зависимости от результата JavaScript будет просто корректировать эти классы CSS выше. В конце концов, кто собирается отключить JavaScript в своем мобильном телефоне (т.е. Android)? Что вы думаете об этой идее? С уважением, М..

Ответ 2

Удалить background-size добавить display:block;

И попробуйте еще раз

Ответ 3

Вы пробовали

фоновое изображение: URL (image.jpg); background-size: 100%;

отнять позицию: абсолютная; background-attachment: fixed;