オーバーフロー：正の方向への翻訳で非表示になっています

Question

最近、私は奇妙なことで最近overflow: hidden;で出会いました。私はそれを要素に設定してから、その要素をtranslate()で変換したいときは、負の方向に変換すると非表示になりますが、正の方向に変換すると非表示になります。デスクトップブラウザでは実際には表示されませんが、少しマウスを置くだけで表示できます。モバイルではスクロールするだけなので、それは最悪です。ここで

は、それを示す例である：http://cssizer.com/KLHlPShW

Answer 1

だから私は一日中似たようで作業している間、私は

html, body {overflow:hidden; }

を持っていたことが実現してきた...私はposition:absoluteを追加する場合、またはposition:relativeをhtmlと本文に追加すると、問題が修正されます。

Answer 2

次のコードを使用して、コンテナdivのすべてをラップします。明示的に両方向でオーバーフローを設定します。これにより、メインコンテンツエリアの右側に要素が翻訳されていても、X軸がiOS Safariでスクロールしなくなります。

-webkit-overflow-scrolling: touch;を追加しない限り、スクロールのパフォーマンスは大幅に低下します。これを見つけるのに私は長い時間がかかりました！うまくいけば、それは他の人を助けることでしょう

.scrollContainer { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    overflow-y: scroll; 
    overflow-x: hidden; 
    -webkit-overflow-scrolling: touch; 
} 

Answer 3

私は正確に同じ問題を抱えていたし、ここで私はそれを修正する方法である：ここでは

HTML

<div id="container">  <!-- defines "boundaries" of content --> 
    <div id="content">  <!-- part of it must be hidden --> 
    </div> 
</div> 

CSS

#container { 
    overflow-x:hidden; 
    overflow-y:hidden; 
    z-index:2; 
} 

#content { 
    /* Translation code ...*/ 
    z-index:1; 
} 

はJSFiddleです。