Положение фиксировано на мобильном вызывающем элементе хром для перемещения по прокрутке вверх/вниз

Я сталкиваюсь с этой странной проблемой, которая выглядит как ошибка на мобильном телефоне Chrome.

У меня есть div с позиции: исправлено; выровнен по верхнему правому углу экрана. На рабочем столе работает нормально (остается на месте), на мобильном, однако, div перемещается, когда я прокручиваю вверх или вниз. Я сделал видео, чтобы объяснить это лучше:

https://www.youtube.com/watch?v=gCgN6ULkcMg

По прокрутке работает нормально

при прокрутке вниз часть элемента div с позицией: fixed исчезает за пределами области просмотра

Я пытался выделить проблему на скрипке, но не смог воспроизвести ее. Таким образом, я инкапсулировал весь сайт в скрипке, и проблема прекратилась. Я до сих пор не понял, почему.

Сайт изолирован в скрипке: удалено *

Живой сайт: Удалено *

Кроме того, я провел несколько тестов на разных устройствах, на живом сайте:

Chrome Mobile: ошибки
Рабочий стол Chrome: отлично работает
Firefox mobile: отлично работает
Safari Mobile: отлично работает

Может кто-нибудь объяснить мне, почему Chrome Mobile имеет эту проблему, а другие нет?

Моя позиция: фиксированный div выглядит примерно так:

div {
  position:fixed;
  top:10px;
  left:0;
  width:100%;
  text-align:right;
}

* Удалены ссылки, потому что это клиентский сайт. Решение в ответе ниже.

Ответ 1

Я узнал.

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

<meta name="viewport" content="minimum-scale=1">

Это работает сейчас.

Ответ 2

Проблема с meta tag вы должны поместить туда

<meta name="viewport" content="height=device-height, 
                      width=device-width, initial-scale=1.0, 
                      minimum-scale=1.0, maximum-scale=1.0, 
                      user-scalable=no, target-densitydpi=device-dpi">

Это связано с тем, что браузер Chrome меняет height области viewport.

Ответ 3

Если вы хотите, чтобы элемент запускался и оставался вверху страницы, попробуйте использовать

    #header {
          position: sticky;
          top: 0;
    }

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

Не уверен, поможет ли это, но это ответ, который я искал, когда добрался до этого вопроса.

Ответ 4

Некоторые из ваших элементов выходят из области просмотра, поэтому Android Chrome автоматически масштабирует область просмотра. Уменьшите элементы, которые больше, чем окно просмотра.