可能或濫用功能？溢出：隱藏的奇怪

Question

這裏是非常有趣的情況。

當溢出：隱藏與位置：相對使用時，奇怪的事情開始發生。自己看！

http://cssdeck.com/labs/u1om11qq

HTML

<div class="carrier"> 
    <div class="button"></div> 
    <div class="button"></div> 
</div> 

CSS

.carrier{ 
    overflow:hidden; 
    width:200px; 
    height: 400px; 
    border-radius: 50px; 
    background:blue; 
} 
.button { 
    position:relative; 
    width: 200px; 
    height: 200px; 
    background-color:rgba(255,0,0,0.2); 
    -webkit-transition:all 0.2s ease; 
    -moz-transition:all 0.2s ease; 
    -ms-transition:all 0.2s ease; 
    -o-transition:all 0.2s ease; 
    transition:all 0.2s ease; 
} 
.button:hover{ 
    background-color:rgba(255,0,0,1); 
} 

是這種情況（閃爍邊緣）的錯誤，還是我錯過了點？

（溢出：隱藏需要覆蓋的邊緣 - 它創建了一個奇怪的閃爍對鉻24.0.1312.57.m）

Answer 1

有一個在WebKit的這個錯誤。

您可以點擊此處查看：

https://bugs.webkit.org/show_bug.cgi?id=67950

說明從尼克拉斯·2011-09-12 13點04分56秒的PST當父元素使用 邊框半徑（使用溢出：隱藏）根據半徑裁剪子節點 。但是，任何-webkit-transform 屬性在父節點或子節點上使用時，邊界半徑爲 丟失。

例可在這裏：http://jsfiddle.net/DkXuR/

在這種情況下，它似乎與-webkit-transition也打破了！

將你的目標元素包裝在wrapper元素中並進行轉換！

有很多錯誤的關於圓角並削減與overflow:hidden內容：

• Rounded corners fail to cut off content in webkit browsers if position:relative
• https://bugs.webkit.org/show_bug.cgi?id=68196