Я делаю горизонтальную прокручиваемую целевую страницу для мобильных устройств, и у меня возникла серьезная проблема с плагинами jquery лайтбокса.
Я попытался написать один, но обнаружил, что проблема в position: fixed не работает вообще.
когда ширина страницы меньше или равна области просмотра, это нормально.
но когда я устанавливаю ширину любого элемента на странице более 100vw position: fixed перестает работать (он начинает выглядеть как абсолютное положение) на мобильном Chrome.
настольные браузеры по-прежнему отображают его правильно, даже если включен адаптивный режим.
Может, я неправильно делаю весь широкий дизайн? как мне это сделать?
Я загрузил пример кода на бесплатный хост:
с width: 100vw; position:fixed; работает нормально
https://unentertaining -bypa.000webhostapp.com / test_ok.html
с width:200vw; position: fixed; начинает работать как абсолютный
https://unentertaining -bypa.000webhostapp.com / test_wrong.html
вот код:
body { padding: 0; margin: 0; }
.bg { width: 200vw; height: 100vh; background: linear-gradient(70grad, #aaa, #fff 20%, #aaa 40%, #fff 60%, #aaa 80%, #fff 100%); }
.fx { position: fixed; box-sizing: border-box; top: 25%; left: 25%; width: 50%; height: 50%; }
.fx { background: #faa; border: 10px solid #afa; }
<div class="bg">foo</div>
<div class="fx">bar</div>
Примечание: Я также правильно понял метатег