overflow: hidden không hoạt động với bản dịch theo hướng tích cực

Question

Tôi bắt gặp một điều kỳ lạ gần đây với overflow: hidden;. Tôi đặt nó thành một phần tử, và sau đó tôi muốn biến đổi các phần tử trong nó với translate(), khi nó dịch theo hướng tiêu cực nó sẽ bị ẩn đi, nhưng nếu tôi dịch theo hướng tích cực, nó sẽ không bị ẩn đi. Trong các trình duyệt máy tính để bàn, nó không thực sự hiển thị, nhưng bạn có thể tiếp cận nó với một chút công việc của chuột. Và trên thiết bị di động, đó chỉ là cuộn, vì vậy đó là điều tồi tệ nhất.

Dưới đây là một ví dụ cho thấy điều đó: http://cssizer.com/KLHlPShW

Answer 1

Vì vậy, tôi đã làm việc với một cái gì đó tương tự như tất cả các ngày và nhận ra rằng trong khi tôi đã

html, body {overflow:hidden; }

... nếu tôi thêm position:absolute hay position:relative vào html và nội dung, nó khắc phục sự cố.

Answer 2

Tôi bọc mọi thứ trong div vùng chứa bằng mã sau. Chèn tràn bộ lọc một cách thích hợp theo cả hai hướng. Điều này giúp trục X không di chuyển trong iOS Safari, ngay cả khi có các phần tử được dịch ở bên phải của vùng nội dung chính.

Nhưng hiệu suất cuộn bị giảm đáng kể trừ khi bạn thêm -webkit-overflow-scrolling: touch;. Phải mất một thời gian dài tôi mới tìm được điều này! Hy vọng nó giúp người khác.

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

Answer 3

tôi đã có vấn đề chính xác giống nhau, và đây là cách tôi cố định nó:

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; 
} 

Đây là một JSFiddle .