CODEWITHSUNDEEP
htmlgoogle-chromecss
Mia
Mia

Reputation: 6531

Possible or Misused Feature? Overflow:Hidden Weirdness

Here is very interesting case.

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

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

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)

Upvotes: 1

Views: 275

Answers (1)

Ivan Drinchev
Ivan Drinchev

Reputation: 19581

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 :

Upvotes: 1

Related Questions