Possible or Misused Feature? Overflow:Hidden Weirdness

Question

Here is very interesting case.

When overflow:hidden is used with position:relative, weird things start to happen. See for yourselves!

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

Is this situation (blinking edges) a bug, or am I missing a point?

(Overflow:hidden needs to cover the edges -- it creates a weird blinking on chrome 24.0.1312.57.m)

I'm on the same version of chrome and I dont see any blinking. The corners do seem to get 'stuck' halfway through the fade out when the mouse leaves though. Very odd... — user1636130, Feb 08 '13 at 13:38

score 1 · Accepted Answer · edited May 23 '17 at 12:12

There is a bug in webkit for this.

You can check it out here :

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

Description From Niklas 2011-09-12 13:04:56 PST When using border-radius on parent element (with overflow:hidden) the child nodes are clipped according to the radius. However, is any -webkit-transform property is used on the parent or the child nodes the border-radius is lost.

Example available here: http://jsfiddle.net/DkXuR/

In this case it seems that it breaks with -webkit-transition too!

Wrap your target element in wrapper element and transform it!

There are plenty of bugs regarding rounded corners and clipping the content with overflow:hidden :

Possible or Misused Feature? Overflow:Hidden Weirdness

1 Answers1