Question

在具有浮动宽度的容器上使用带有百分比值的转换时（例如，800.63px），Chrome总是以不正确的像素舍入位置。这通常发生在em / rem宽度与百分比的组合中（参见下面的示例）：

HTML：

.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;
  }
}

SCSS：

{{1}}

结果是下一张幻灯片的某些部分始终可见。看起来Chrome首先对项目宽度进行舍入，然后将其乘以百分比值。

这有什么已知的解决方法吗？如果我在JS中进行数学运算并在变换中使用px值，那么一切（几乎）都是完美的，但它不应该“仅仅与百分比一起工作”吗？

请参阅工具示例小提琴：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中的转换位置不正确

1 个答案: