Линия багги на полностью позиционированном слайдере - PullRequest
0 голосов
/ 06 октября 2018

Извините за мой английский в первую очередь.Я использую слайдер материализации с абсолютным позиционированием, который некоторое время работает почти нормально в производстве.Но на IPad возникает (иногда) глючная строка, как на скриншоте ниже.Каждое изображение имеет одинаковый размер в пикселях ...

Интересно, вызвано ли оно моим css / less, как показано ниже:

.image-wrp,
.slider {
  position: absolute;
  bottom: 20%;
  left: 20%;
  height: 60% !important;
  width: 60%;
  overflow: hidden;
  .slides {
    height: 100% !important;
    background: white !important;
  }

Или это ошибка округления?Или вызвано материализацией.Я использую v0.100.2.?

Интересно, может ли кто-нибудь дать подсказку, в каком направлении я должен подумать, чтобы найти решение здесь ....Заранее большое спасибо.

enter image description here

ОБНОВЛЕНИЕ Пока я не найду более изощренное решение, следующий js / jQuery решил проблему,но, похоже, не очень элегантно ...Я запускаю эту функцию, когда dom готов или окно изменяет размер.

 function subPixelCorrection() {
    var sliderImages = $('.slider .slides li');
    var imgWidth = Math.floor($('.slider .slides li').innerWidth());
    $('.slider .slides li img').css('width', "");
    $('.slider .slides li img').css('width', imgWidth + "px");
 }
...