1

これは非常に興味深いケースです。

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

この状況 (エッジの点滅) はバグですか、それともポイントがありませんか?

(Overflow:hidden はエッジをカバーする必要があります -- クロム 24.0.1312.57.m で奇妙な点滅を作成します)

4

1 に答える 1

1

これにはwebkitにバグがあります。

あなたはここでそれをチェックすることができます：

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

説明FromNiklas2011-09-12 13:04:56 PST親要素でborder-radiusを使用する場合（overflow：hiddenを使用）、子ノードは半径に従ってクリップされます。ただし、親ノードまたは子ノードで-webkit-transformプロパティが使用されている場合、border-radiusは失われます。

ここで利用可能な例：http：//jsfiddle.net/DkXuR/

この場合、それも壊れているよう-webkit-transitionです！

ターゲット要素を要素でラップしてwrapper変換します！

overflow:hidden角を丸くしたり、コンテンツを次のように切り抜いたりすることに関しては、たくさんのバグがあります。

于 2013-02-08T13:39:00.590 に答える