Запретить фиксированное положение фонового изображения: изменение размера обложки в мобильных браузерах при скрытии адресной строки

Извините за отсутствие примера на этом, но я думаю, что это достаточно легко понять.

У меня есть фиксированный фон на моем сайте, который в настоящее время реализован так:

#background {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #28305e;
    background-image: url(../images/background.jpg);
    background-size: cover;
    -moz-background-size: cover;
    background-position: center center;
    z-index: -10;
}

<div id="background"></div>

Это замечательно во всех браузерах, за исключением мобильных браузеров, где они скрывают адресную строку при прокрутке вниз. Когда адресная строка скрыта, область просмотра расширяется по вертикали, и фоновое изображение резко изменяется. На этом конкретном сайте пользователи обычно будут прокручивать вверх и вниз, и это отвлекает.

Какие-нибудь идеи или стратегии обойти это или реализовать фон по-другому?

Я мог бы обернуть все это в фиксированный контейнер и установить для overflow-y значение прокрутки, которое предотвращает скрытие адресной строки, но я бы предпочел этого не делать (Google Glass не может прокручивать эти контейнеры, хаха ... Хотелось бы и там продемонстрировать).

Я пытался придумать что-то, что обеспечивает background-image: функциональность покрытия каким-то буфером, так что он рендерит больше, чем область просмотра, и не будет повторно визуализироваться, если область просмотра не будет расширена за пределы этого буфера, но я Я не уверен, как это реализовать.

РЕДАКТИРОВАТЬЯ действительно реализовал это и подробно описал процесс в ответе ниже. Однако даже при такой настройке буфера (которая увеличивает высоту фонового изображения на 60+ пикселей больше, чем высота области просмотра), при скрытии адресной строки все равно отображается пустой сегмент цвета фона, который открывается, и как только вы остановите прокрутку, это сделает остальную часть фонового изображения.

Все еще ищем способ сохранить функцию скрытия родной адресной строки (которая теперь расширена до iOS Safari на iPad в iOS 8), а также иметь полноэкранное фоновое изображение, которое всегда полностью отображается, даже если область просмотра изменяет высоту при скрытии адреса бар. Начинаю задумываться, стоит ли мне просто подавать отчеты об ошибках для всех браузеров ...

Ответы на вопрос(5)

Ваш ответ на вопрос