Неправильная позиция преобразования в Chrome при использовании процентов - PullRequest
Новая
       33

Неправильная позиция преобразования в Chrome при использовании процентов

0 голосов
/ 11 июня 2018

При использовании преобразования с процентным значением в контейнере с плавающей шириной (например, 800,63 пикселей) Chrome всегда неправильно округляет позицию в пикселях.Обычно это происходит с шириной em / rem в сочетании с процентами (см. Пример ниже):

HTML: 

<div class="container">
  <div class="wrap">
    <div class="slider">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div>
</div>

SCSS: 

.container {
  width: 38rem;
}

.wrap {
  width: 33%;
  overflow: hidden;
}

.slider {
  white-space: nowrap;
  font-size: 0;
  transform: translate3d(-1000%,0,0);
}

.item {
  display: inline-block;
  height: 8rem;
  width: 100%;
  background: limegreen;

  &:nth-child(even) {
    background: orangered;
  }
}

В результате какая-то часть следующего слайда всегда видна.Похоже, что Chrome сначала округляет ширину элемента, а затем умножает его на процентное значение.

Есть ли какой-нибудь известный способ для этого?Если я делаю математику в JS и использую значения px в transform, тогда все (почти) идеально, но разве это не должно "просто работать" с процентами тоже?

Пожалуйста, посмотрите рабочий пример на скрипте: https://jsfiddle.net/Lumh07te/37/

1 Ответ

0 голосов
/ 14 июня 2018

Измените способ установки размеров.

Вместо ползунка, имеющего ширину 100% и нуждающегося в максимальном преобразовании 1000%, установите его на ширину 1000% и необходимое максимальное преобразование в100%.

И ширина элементов теперь составляет 10% вместо 100%

в исходном коде, обтекание имеет ширину, которая не является целым числом, но чем в макете, вынужден отображатькак целочисленное значение в пикселях.Затем при переводе 1000% этого значения ошибки округления умножаются на 10. Если вместо этого установить ширину в 1000%, округление до пикселей выполняется для этого размера, а затем оно накладывается на значения, меньшие 1 (0,5, 0,6, 0,7 ..) или 1 максимум 

.container {
  width: 38rem;
}

.wrap {
  width: 33%;
  overflow: hidden;
}

.slider {
  width: 1300%;
  white-space: nowrap;
  font-size: 0;
  transform: translateX(calc(-500%  / 13));
  transition: transform 0.4s;
}

.test {
    height: 50px;
}
.test:hover ~ .wrap .slider {
  transform: translateX(calc(-800%  / 13));
}

.item {
  display: inline-block;
  height: 8rem;
  width: calc(100% / 13);
  background: limegreen;
  font-size: 30px;
}

.item:nth-child(even) {
  background: orangered;
}
<div class="container">
  <div class="test">test</div>
  <div class="wrap">
    <div class="slider">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10</div>
      <div class="item">11</div>
      <div class="item">12</div>
      <div class="item">13</div>
    </div>
  </div>
</div>
...