Как избавиться от изменения размеров фона при скрытии статус-бара в мобильных браузерах?

Question

[qunaxis]

.background
        background: url('/img/background.jpg') no-repeat top right
        background-size: cover
        overflow: hidden
        min-height: 100vh
        position: relative

На мобильных браузерах фон "скачет", т.к. пересчитываются его размеры при схлопывании статус-бара
Как исправить?

Answer 1

[WQP]

Это из-за background-size: cover. Поставьте transition на background для плавного ресайза

Comments

[qunaxis]

Не могли бы вы привести пример кода?
Я пробую сделать, transition отказывается работать.

[qunaxis]

transition: width 1s ease-in-out, left 1.5s ease-in-out
Я пробовал такой вариант

[WQP]

qunaxis:

-webkit-transition: background 0.2s ease;
-o-transition: background 0.2s ease;
transition: background 0.2s ease;

[WQP]

qunaxis: анимация ко всем свойствам сразу

-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;