Div нижняя панель инструментов появляется на iPhone, но не на Android

Я делаю веб-приложение, которое адаптировано для мобильных устройств. У меня есть панель инструментов, которая расположена на правой стороне экрана в браузере моего компьютера, и она должна быть зафиксирована в нижней части экрана на мобильном телефоне. Странно то, что при открытии с помощью iPhone панель инструментов выглядит правильно зафиксированной внизу, но когда я открываю приложение на устройстве Android, например на моем Samsung Galaxy S5, панель инструментов вообще не появляется. Во время некоторого тестирования, когда я изменил свой стиль на относительный, а не фиксированный, панель инструментов отображается в одной и той же позиции в середине экрана на iPhone и Android. Как вы думаете, проблема может быть?

Вот код:

<div class="col-sm-2">
 <div class="sidebar-nav-right">
  <div class="navbar navbar-default navbar-style" role="navigation">
   <div class="nav">';
    <a class="brand font-26 block brand-color">Tools</a>
     <ul class="nav navbar-nav center">
     <li><a data-toggle="modal" data-target="#newgroup-modal" class = "font-16">Create Group</a></li>
     <li><a href="javascript:;" class = "font-16">Item 2</a></li>
     <li><a href="javascript:;" class = "font-16">Item 3</a></li>
     </ul>
   </div>
  </div>
 </div>
</div>

.sidebar-nav-right{
width: 100%;
position: fixed;
bottom: 0px;
border-top: 1px solid black;
}

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

Источник

3 ответа

Решение

Если add {left: 0} не может решить эту проблему, я думаю, что родительский узел.sidebar-nav-right имеет преобразование; тогда исходное положение было сброшено.

Источник

Это распространенная проблема в старых браузерах Android. Просто добавь -webkit-backface-visibility: hidden; к фиксированному элементу.

Есть два способа это исправить. В этой статье Брэда Фроста приведен список решений Javascript: http://bradfrost.com/blog/mobile/fixed-position/

Или попробуйте упомянутое выше исправление Бена Фрейна: https://benfrain.com/easy-css-fix-fixed-positioning-android-2-2-2-3/

Смотрите также этот CodePen от Ben Frain: http://codepen.io/benfrain/full/wckpb

Источник

Я думаю, что комментарий @GoreWang точный. Вы должны попробовать следующие 2 вещи:

(1) При фиксированной позиции, иногда не имея установленного свойства left, фиксированный элемент не появляется при загрузке страницы. Попробуйте добавить следующее:

.sidebar-nav-right { 
  left: 0;
}

(2) Добавьте следующий код к вашему фиксированному элементу:

 .sidebar-nav-right { 
   transform: translateZ(0);
   -webkit-transform: translateZ(0); 
}

Это заставляет Chrome использовать аппаратное ускорение, чтобы непрерывно рисовать фиксированный элемент и избегать этого странного поведения.(Известная ошибка)

Источник
Другие вопросы по тегам