với bán kính đường viền và dịch3d

Question

Khi nội dung của khối có số overflow: hidden; và border-radius được dịch, các góc của nó không bị ẩn. Có giải pháp nào để sửa lỗi này không?

HTML

<div class="scroller"> 
    <div class="scroller-content"></div> 
</div> 

CSS

.scroller{ 
    width: 300px; 
    height: 500px; 
    border: 3px solid red; 
    border-radius: 30px; 
    overflow: hidden; 
} 
.scroller-content{ 
    width: 300px; 
    height: 300px; 
    background: green; 
    -webkit-transform: translate3d(0, -8px, 0); 
} 

http://jsfiddle.net/aZ5Qn/

Answer 1

Vì bạn đang không sử dụng z trong dịch, bạn có thể thay đổi nó để translate2d, mà không làm việc:

demo

.scroller{ 
width: 300px; 
height: 500px; 
border: 3px solid red; 
border-radius: 30px; 
overflow: hidden; 
} 
.scroller-content{ 
width: 300px; 
height: 300px; 
background: green; 
-webkit-transform: translate(0, -8px); 
} 

Điều này được ghi lại trong liên kết mà Chtiwi Malek cung cấp, nhưng ở đây nó chỉ là trình duyệt dành cho thiết bị di động và tôi gặp sự cố này trên máy tính để bàn.

chỉnh sửa

Nó cũng làm việc (ít nhất là trong máy tính để bàn) nếu bạn thiết lập tràn và biến đổi trong cùng một nguyên tố

.scroller{ 
    width: 300px; 
    height: 500px; 
    border: 3px solid red; 
    border-radius: 30px; 
    overflow: hidden; 
    -webkit-transform: translate3d(0, -8px, 5px); 
} 
.scroller-content{ 
    width: 300px; 
    height: 300px; 
    background: green; 
} 

Answer 2

Accually, bạn có thể chỉ cần đặt

transform: translate3d(0,0,0);

Trên yếu tố bạn cần s overflow + border-radius kết hợp ...