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

当在具有浮动宽度（例如800.63px）的容器上使用带有百分比值的变换时，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>

.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中进行计算，并在transform中使用px值，那么一切（几乎）都是完美的，但它不应该“只适用于”百分比吗

---

请参见fiddle了解工作示例：

更改设置尺寸的方式

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

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

在原始代码中，wrap的宽度不是整数，但布局中的宽度被强制渲染为以像素为单位的整数值。然后，将该值的1000%转换为整数，将舍入误差乘以10。如果改为将“宽度”设置为1000%，则在此大小上对像素进行舍入，然后将其乘以小于1（0.5、0.6、0.7..）或最大值为1的值

.container{
宽度：38rem；
}
.包裹{
宽度：33%；
溢出：隐藏；
}
.滑块{
宽度：1300%；
空白：nowrap；
字号：0；
转换：translateX（计算（-500%/13））；
转变：转变0.4s；
}
.测试{
高度：50px；
}
.test:悬停~.wrap.滑块{
转换：translateX（计算（-800%/13））；
}
.项目{
显示：内联块；
高度：8雷姆；
宽度：计算（100%/13）；
背景：白鹭；
字体大小：30px；
}
.项目：第n个子项（偶数）{
背景：橙色；
}

测验
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13

谢谢你的建议！有趣的是，另一种方法效果更好。不过，也存在一些问题。在这种情况下，我不能真正使用动画，因为整个转换必须通过JavaScript控制。如果我对转换做同样的事情，我需要在JS中做数学运算，请看更新的示例：如你所见，我必须为每个滑块长度设置项目的宽度（一个用于7个项目，另一个用于13个项目），并且我必须为每个步骤使用平移值，如-84.59%，这也可能会导致四舍五入错误。此外，也许你知道为什么最初的示例在Chrome中不起作用了？具体的解决方案是受欢迎的，但对我来说，更重要的是理解原始示例的错误。再次感谢！使用动画只是为了显示滑块中任意点的显示正常。我有代码更类似于你的要求。将鼠标悬停在test上，使滑块发生变化确实，这样看起来更加优雅。谢谢你的努力！