Адресная строка мобильного телефона сбрасывает фиксированное положение - PullRequest
Новая
       4

Адресная строка мобильного телефона сбрасывает фиксированное положение

0 голосов
/ 29 ноября 2018

Я создаю изображения параллакса, создавая фиксированные фоны на таких элементах, как этот: 

#element:before {
    content: '';
    background: url('sample.jpg') no-repeat;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
    left: 0;
    top: 0;
    background-position: 68% center;
    transform: translate3d(0,0,0);
}

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

Спасибо

Ответы [ 2 ]

0 голосов
/ 29 ноября 2018

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

На странице просто пустой тег стиля с идентификатором для цели: 

<style id="values-styles" type="text/css">

</style>

Затем JS/ jQuery: 

var valuesStyles = jQuery('#values-styles');

// since window resize is called when the address bar is shown or hidden
jQuery(window).resize(function() {
valuesStyles.html("#values:before { height:" + jQuery(window).height() + "px;}");
});

Отлично работает!

0 голосов
/ 29 ноября 2018

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

По сути, вы должны попытаться использовать position: absolute вместо.

...