Chromeのサブピクセルによるオーバーフロー-Xの問題を回避する方法

Question

私は相対的な位置にあるオーバーフロー-x：autoのコンテナdivを持っています。内側divは絶対的に配置され、幅は33.3333％（1/3）です。この内部divは、transform：translate3d（）プロパティを遷移させることによって、アプリケーションのアニメーションなどでスライドします。問題は、内側のdivが親コンテナの最後の3分の1（translate3dが200％、0,0に設定されている）になるようにしたい場合、オーバーフロープロパティをトリガします。私はこれがクロムでのみ起こると信じています（しかし、おそらくサファリでもあります）。

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;または490ピクセル。テスト1で。

すなわち：

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

私は、これがエラーの原因となる理由はわからないか、この修正プログラムがあなたのために動作しますが、場合、それはちょうどそれがあなたを与えて均等に完全に分割し、「切り上げ」ではないとしなければならないことがありxオーバーフロースクロールバー