HTML CSS 2D привязка неверна в Firefox - PullRequest
Новая
       36

HTML CSS 2D привязка неверна в Firefox

0 голосов
/ 20 февраля 2020

Я создаю простую страницу галереи на основе 2-го кода Макса Колера.

https://codepen.io/maxakohler/pen/MBWJKm

Но, как и в ручке Макса, здесь есть проблема с прокруткой в ​​Firefox. При прокрутке прямо вверх / вниз или в любую сторону экран щелкает по диагонали. В Chrome и Safari все работает так, как должно быть. Есть ли какое-то решение для решения этой проблемы в Firefox?

Мой текущий код 

* {
  font-family: sans-serif;
  color: white;
  text-rendering: geometricPrecision;
  text-transform: uppercase;
  margin: 0px;
}

body {
  padding: 0px !important;
  margin: 0px !important;
}

.gallery {
  border: 0px solid red;
  padding: 0px;
  display: grid;
  grid-template-columns: repeat(3, 90vw);
  grid-template-rows: repeat(10, calc(100vh - 78px));
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  flex-wrap: wrap;
  overflow: scroll;
  height: 100vh;
  scroll-snap-type: both mandatory;
  scroll-padding: 0px;
}

li {
  scroll-snap-align: start;
  display: inline-block;
  border-radius: 0px;
  background-color: blue;
  background-size: cover;
  background-position: center top;
}

.hero {
  font-family: sans-serif;
  margin: 2px;
}

.logo {
  width: 200px;
  position: fixed;
  bottom: 10px;
  right: 10vw;
}

.logoimg {
  z-index: 9999;
  font-family: arial;
  font-size: 30px;
  color: white;
  transition: 0.3s;
  width: 100%;
  height: auto;
}
<div class="logo">
  <img class="logoimg" src="http://ostost.studio/wp-content/uploads/2019/06/ostost_logo_small_big-739x501.png"></div>


<ul class="gallery">
  <li>Debitis, asperiores ipsum.</li>
  <li>Aliquam, minus corporis.</li>
  <li>Illum, voluptatem maxime.</li>
  <li>Qui, explicabo odio!</li>
  <li>Iusto, nihil illum.</li>
  <li>Debitis, asperiores ipsum.</li>
  <li>Aliquam, minus corporis.</li>
  <li>Illum, voluptatem maxime.</li>
  <li>Qui, explicabo odio!</li>
  <li>Iusto, nihil illum.</li>
  <li>Iure, numquam facere.</li>
  <li>Possimus, non eos!</li>
  <li>Nesciunt, quas consectetur.</li>
  <li>Accusantium, earum autem!</li>
  <li>Accusantium, earum autem!</li>
  <li>Accusantium, earum autem!</li>
  <li>Accusantium, earum autem!</li>

</ul>
...