Блог

Главная - Вопросы по программированию - Кнопка в фиксированном положении div исчезает при обновлении с помощью JavaScript (встречается только в мобильном браузере Firefox)

Кнопка в фиксированном положении div исчезает при обновлении с помощью JavaScript (встречается только в мобильном браузере Firefox)

#javascript #css #firefox #mobile

#javascript #css #firefox #Мобильный

Вопрос:

У меня есть страница с фиксированным расположением div и одной кнопкой (назовем ее «фиксированной кнопкой»). На странице есть несколько других кнопок («кнопки обновления»), которые при нажатии обновляют значение фиксированной кнопки с помощью JavaScript.

При загрузке страницы, если нажата любая из кнопок обновления, значение фиксированной кнопки обновляется без проблем. Однако, если я прокрутю вниз и снова нажму любую из кнопок обновления, фиксированная кнопка иногда исчезнет. Если я прокручиваю после исчезновения фиксированной кнопки, она снова станет видимой.

Похоже, это происходит только в мобильном браузере Firefox (версия 82.1.1). Этого не происходит ни в Chrome / Safari mobile, ни в любых настольных браузерах, которые я проверял (включая Firefox desktop).

Я нашел пару вопросов, которые касались исчезновения всего элемента с фиксированной позицией, но не нашел ничего, что касалось бы исчезновения элементов внутри элемента с фиксированной позицией или чего-либо специфичного для Firefox. В этих вопросах были предложения по обновлению свойств z-index , transform: translateZ(0) , и overflow . Я пробовал, и, похоже, никто не решил проблему.

У кого-нибудь есть обходной путь для этой проблемы?

Ниже приведен фрагмент кода. Вот также ссылка с тем же кодом.

 let num = 0;
const buttons = document.getElementsByClassName('updateButtons');
for (let i = 0; i < buttons.length; i  ) {
  buttons[i].addEventListener('click', function() {
    num  ;
    document.getElementById('fixedButton').value = num;
  });
}  
 input {
  margin: 10px;
}

div.fixed {
  position: fixed;
  background: #fff;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
}  
 <div>
  <input class="updateButtons" type="button" value="click"><br>
  <input class="updateButtons" type="button" value="click"><br>
  <input class="updateButtons" type="button" value="click"><br>
  <input class="updateButtons" type="button" value="click"><br>
  <input class="updateButtons" type="button" value="click"><br>
  <input class="updateButtons" type="button" value="click"><br>
  <input class="updateButtons" type="button" value="click"><br>
  <input class="updateButtons" type="button" value="click"><br>
  <input class="updateButtons" type="button" value="click"><br>
  <input class="updateButtons" type="button" value="click"><br>
  <input class="updateButtons" type="button" value="click"><br>
  <input class="updateButtons" type="button" value="click"><br>
  <input class="updateButtons" type="button" value="click"><br>
  <input class="updateButtons" type="button" value="click"><br>
  <input class="updateButtons" type="button" value="click"><br>
  <input class="updateButtons" type="button" value="click"><br>
  <input class="updateButtons" type="button" value="click"><br>
  <input class="updateButtons" type="button" value="click"><br>
  <input class="updateButtons" type="button" value="click"><br>
  <input class="updateButtons" type="button" value="click">
</div>

<div class="fixed">
  <hr>
  <input id="fixedButton" class="button" type="button" value="0">
</div>

Комментарии:

1. Пожалуйста, версия FF?

2. Привет @RandyCasburn, я использую FF версии 82.1.1

3. Используете ли вы бета-версию на Android? GA для Android — 81.0

4. Пришлось перепроверить. Это не бета-версия. Это последняя версия «Firefox Daylight», выпущенная 20 октября 2020 года.

5. Я проверил еще немного, и, похоже, это проблема во всех браузерах Android FF. Проблема не возникает в Chrome, Safari, Opera или Brave на Android. Это также не проблема ни для настольных компьютеров, ни для браузеров iPhone. Я создал отчет об ошибке в Mozilla.

Ответ №1:

Я это исправил!

Это вызвано скрытием адресной строки при прокрутке в мобильном приложении Firefox.

Я решаю это, предотвращая скрытие адресной строки с добавлением некоторых стилей к родительскому элементу или оболочке в теле:

  .wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }