使用百分比时 Chrome 中的变换位置不正确

Question

在具有浮动宽度（例如 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 值，那么一切（几乎）都是完美的，但它不应该 "just work" 也带有百分比吗？

请参阅 fiddle 工作示例：https://jsfiddle.net/Lumh07te/37/

Answer 1

更改设置尺寸的方式。

不要将宽度为 100% 且需要最大变换为 1000% 的滑块设置为宽度为 1000% 并需要最大变换为 100%。

并且项目宽度现在是 10% 而不是 100%

在您的原始代码中，wrap 的宽度不是整数，但在布局中强制呈现为以像素为单位的整数值。然后，转换此值的 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>

使用百分比时 Chrome 中的变换位置不正确

Incorrect transform position in Chrome when using percent

css

webkit

google-chrome

css-transforms