Question

我有一个容器div，它是位置相对的，并且有overflow-x：auto。内部div绝对定位，宽度为33.3333％（三分之一）。这个内部div通过转换transform：translate3d（）属性来为应用程序滑动动画等。问题是，当我希望内部div位于父容器的最后三分之一（translate3d设置为200％，0,0）时，它会触发overflow属性。我相信这只发生在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);
}

小提琴 https://jsfiddle.net/fcyx2aou/

有关如何解决此问题的任何想法？（并且我通过达到199％所做的调整将不起作用，因为在我的一些用例中最终会看到小的间隙偏移）

Answer 1

你可以使整个滚动部分的宽度宽度：492px;或490px;在.test1。

即：

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

我不确定为什么会导致这个错误或者这个修复程序对你有用但是它可能只是与它完全不均匀划分并且＆＃34;四舍五入＆＃34;给你一个x溢出滚动条。

如何避免在Chrome中使用子像素的overflow-x问题

1 个答案: