2016-04-28 9 views
2

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

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%に行った調整は、小さなギャップオフセットが最終的にいくつかの使用例で表示されるため動作しません)

+0

本当にお手伝いしたいと思っています。あなたが手に入れようとしていることをもう少し理解するのに役立つイメージや何かを説明することができますか? translate3d、height、overflowの各プロパティを使用して同じ問題が発生しました。 –

+0

@CarlosBensant jsfiddleリンクでは十分ではありませんか?私は視覚的に容易に見ることができる例としてこれを作成しました。基本的には、もし私がコンテナを持っていて、それの幅の何分の一でなければならない要素を持っていれば(私はこの例では1/3を選んだが、私のアプリケーションでは可変で1/4、1/5、1/6など)。次に、translate3dを使用してその内部divをさまざまなサイズに移動しようとしています。だから1/3サイズの内部divがある場合、X 0%、100%、および200%のそれぞれを翻訳することで動き回ります。 200%は親にオーバーフローを作成します。 – mls3590712

答えて

0

スクロールセクション全体の幅を作ることができます:492px;または490ピクセル。テスト1で。

すなわち:

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

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

+0

実際に問題を示すために491ピクセルを選択しました。私は、コンテナの幅の合計がより均等に割り切れる場合、問題はなくなることを認識しています。実際のアプリケーションでは、幅は単純に100%に設定されているので、それは流動的です。つまり、すべての画面/ブラウザウィンドウサイズで動作する必要があります。 – mls3590712

関連する問題