html - 如何避免 Chrome 中子像素的 overflow-x 问题

Question

我有一个容器 div，它是相对位置的，并且有 overflow-x: auto。内部 div 是绝对定位的，宽度为 33.3333%(三分之一)。通过转换 transform: translate3d() 属性，此内部 div 会随着应用程序的动画等而滑动。问题是，当我希望内部 div 位于父容器的最后三分之一(translate3d 设置为 200%、0、0)时，它会触发溢出属性。我相信这只发生在 Chrome 中(但也可能发生在 safari 中)。

HTML

Creates a scroll bar because of subpixels
<div class="test1">
    <div class="test2"></div>
</div>

Adjusting it slightly shows this to be the case
<div class="test1">
    <div class="test2 adjustment"></div>
</div>

CSS

.test1 {
    width: 491px;
    background: lightblue;
    height: 30px;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
}

.test2 {
    width: 33.3333%;
    height: 15px;
    background: purple;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate3d(200%,0,0);
}

.adjustment {
  transform: translate3d(199%,0,0);
}

fiddle https://jsfiddle.net/fcyx2aou/

关于如何解决这个问题有什么想法吗？ (我通过调整到 199% 所做的调整将不起作用，因为在我的一些用例中最终会看到那个小间隙偏移)

Answer 1

你可以让整个滚动部分的宽度为width: 492px;或 490 像素；在.test1.

即:

.test1 {
   width: 490px; /*or 492*/
   background: lightblue;
   height: 30px;
   overflow-x: auto;
   overflow-y: hidden;
   position: relative;
}

我不确定为什么这会导致错误，或者这个修复程序是否对你有用，但它可能只与它没有完全均匀地划分和“四舍五入”给你一个 x-overflow 滚动条有关。