私は相対的な位置にあるオーバーフロー-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%に行った調整は、小さなギャップオフセットが最終的にいくつかの使用例で表示されるため動作しません)
本当にお手伝いしたいと思っています。あなたが手に入れようとしていることをもう少し理解するのに役立つイメージや何かを説明することができますか? translate3d、height、overflowの各プロパティを使用して同じ問題が発生しました。 –
@CarlosBensant jsfiddleリンクでは十分ではありませんか?私は視覚的に容易に見ることができる例としてこれを作成しました。基本的には、もし私がコンテナを持っていて、それの幅の何分の一でなければならない要素を持っていれば(私はこの例では1/3を選んだが、私のアプリケーションでは可変で1/4、1/5、1/6など)。次に、translate3dを使用してその内部divをさまざまなサイズに移動しようとしています。だから1/3サイズの内部divがある場合、X 0%、100%、および200%のそれぞれを翻訳することで動き回ります。 200%は親にオーバーフローを作成します。 – mls3590712