CSS Scroll Привязывайте визуальные глюки на iOS при программной настройке стиля для детей - PullRequest
Новая
       24

CSS Scroll Привязывайте визуальные глюки на iOS при программной настройке стиля для детей

0 голосов
/ 25 октября 2018

https://codepen.io/thomaslindstr_m/pen/qJLbwa

Пример довольно голых костей выше. Я хочу скрыть ребенка, которого прокручивал от , но когда включена функция CSS Scroll Snap, он начинает очень плохо работать на моем iPhone iOS 12.0.1.

Смотрите видеоздесь: https://file -qacepzxlkb.now.sh /

Перед перезагрузкой я отключил Scroll Snap (JavaScript все еще работает), после перезагрузки включаю его.

Вот код JavaScript: 

const windowWidth = window.innerWidth;

const viewsElement = document.querySelector('.views');
const firstViewContainer = viewsElement.querySelector('.container');

function scrollHandler(event) {
  const {scrollLeft} = viewsElement;
  const opacity = 1 - ((scrollLeft / windowWidth) / 1.5);

  firstViewContainer.style = `opacity:${opacity};`;
}

viewsElement.addEventListener('scroll', scrollHandler, {passive: true});

Выдержка из CSS: 

.views {
  overflow: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
}

.view { 
  /* NOTE remove to see that this issue is related to scroll snap */
  scroll-snap-align: start;
}

Есть идеи о том, что вызывает эту проблему, и, возможно, как ее исправить?Я понимаю, что это может потребовать взлома, так как он отлично работает в Chrome 70 на macOS.

...