可能的或滥用的功能？溢出：隐藏的怪异答案

【问题标题】：Possible or Misused Feature? Overflow:Hidden Weirdness可能的或滥用的功能？溢出：隐藏的怪异
【发布时间】：2013-02-08 21:50:26
【问题描述】：

这是一个非常有趣的案例。

当 overflow:hidden 与 position:relative 一起使用时，奇怪的事情开始发生。自己看吧！

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

这种情况（闪烁的边缘）是一个错误，还是我错过了一点？

（溢出：隐藏需要覆盖边缘 - 它会在 chrome 24.0.1312.57.m 上产生奇怪的闪烁）

【问题讨论】：

怎么了？我们会看到什么？什么“奇怪”的东西？？
刚刚编辑了问题-
搜索border-radius bug chrome
我使用的是同一版本的 chrome，但我没有看到任何闪烁。当鼠标离开时，角落似乎确实在淡出的中途“卡住”了。很奇怪……

标签： html google-chrome css

【解决方案1】：

webkit 中有一个错误。

你可以在这里查看：

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

描述来自 Niklas 2011-09-12 13:04:56 PST 使用时父元素上的边界半径（溢出：隐藏）子节点根据半径剪裁。但是，任何 -webkit-transform 属性用于边界半径所在的父节点或子节点丢了。

此处提供示例：http://jsfiddle.net/DkXuR/

在这种情况下，它似乎也与-webkit-transition 中断了！

将您的目标元素包裹在wrapper 元素中并对其进行转换！

有很多关于圆角和使用overflow:hidden 剪切内容的错误：

【讨论】：

谢谢！这是一个很好的答案！