Leakage out of `overflow:hidden` parent with rounded border in Chrome

Question

Cropped by rounded parent child's hidden part still persists and active in Chrome:

Cursor pointer firing outside rounded parent

The same behavior in IE could be cured by adding z-index property to parent. Still found no cure for Chrome.

#container {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: orange;
    position: fixed;
    overflow: hidden;
    /*z-index: 1;*/
}

#element {
    width: 100px;
    height: 100px;
    background-color: blue;
    position: absolute;
    top: 150px;
    left: 100px;
    cursor: pointer;
}

<div id="container">
    <div id="element"></div>
</div>

http://jsfiddle.net/a09q6cw2/

web-tiki · Accepted Answer · 2015-05-11 12:53:44Z

4

For versions of chrome that support -webkit-clip-path, you can clip the child at the same boundaries as the parent and prevent the cursor change outside the parent :

#container {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: orange;
  position: fixed;
  overflow: hidden;
  z-index: 1;
}
#element {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: absolute;
  top: 150px;
  left: 100px;
  -webkit-clip-path: circle(100px at 0px -50px);
  cursor: pointer;
}

<div id="container">
  <div id="element"></div>
</div>

answered May 11, 2015 at 12:53

web-tiki

104k33 gold badges226 silver badges258 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jevgenij Over a year ago

Thanks, -webkit-clip-path solves the issue for Chrome.

Vicky · Accepted Answer · 2015-05-11 13:13:26Z

1

Please check this may be works for you..

CSS

.cricle {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #ccc;
  border-radius: 100%;
  overflow:hidden;
}

.box {
 position: absolute;
  width: 400px;
  height: 500px;
  background-color: red;
  left: 50%;
  top: 100px; /*this value same with first value of clip-path top value*/
  cursor:pointer;
  -webkit-clip-path: circle(100px at 0px 0px);
}

HTML

<div class="cricle">
    <div class="box"></div>
  </div>

answered May 11, 2015 at 13:13

Vicky

3782 silver badges15 bronze badges

1 Comment

jevgenij Over a year ago

Thanks for it, it does solve the issue, but I have accepted preceding answer.

web-tiki · Accepted Answer · 2015-05-11 12:57:55Z

-1

Its a basic HTML rendering for parent and child. You have just given overflow:hidden for the parent,so the part of child which is out of parent boundary has been clipped off.but in no where you have hidden the child div right?so how you expect it to be under parent div?

If you can swap the parent and child div see how the html will look like.

#container {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: orange;
  position: fixed;
  overflow: hidden;
  /*z-index: 1;*/
}
#element {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: absolute;
  top: 150px;
  left: 100px;
  cursor: pointer;
}

<div id="element">
  <div id="container">
  </div>
</div>

If you want to hide the child div i think you have to specify display:none for it.

edited May 11, 2015 at 12:57

web-tiki

104k33 gold badges226 silver badges258 bronze badges

answered May 11, 2015 at 12:53

Jayababu

1,6211 gold badge14 silver badges31 bronze badges

2 Comments

jevgenij Over a year ago

The point was to make hidden part of a child element to be clipped truly and not to intercept mouse events.

user23031988 Over a year ago

you misunderstood the question

maioman · Accepted Answer · 2015-05-11 13:35:11Z

-1

if you want to support ie maybe clipPath can help:

#rect {
    cursor: pointer;
}

<svg width="200" height="200"
 viewPort="0 0 200 200" version="1.1"
 xmlns="http://www.w3.org/2000/svg">

<defs>
    <clipPath id="myClip">
        <circle cx="100" cy="100" r="100"/>

    </clipPath>
</defs>

<rect x="0" y="0" width="200" height="200" fill="orange"
      clip-path="url(#myClip)"/>
<rect id="rect" x="100" y="150" width="100" height="100" fill="blue"
      clip-path="url(#myClip)"/>

</svg>

answered May 11, 2015 at 13:35

maioman

18.8k4 gold badges39 silver badges46 bronze badges

4 Comments

jevgenij Over a year ago

Don't know why your answer was blackballed, but anyway z-index mentioned, while lacks an explanation, still is far more compact and easier solution.

maioman Over a year ago

at first I looked into -webkit-clip-path and clip-path CSS property (like @web-tiki 's answer) but that 's lacking ie support while SVG clipPath should be supported also from IE9 onwards...

jevgenij Over a year ago

See no IE9 compatibility issues with common CSS-way as well, since IE here functions properly and has no need for clip-path.

maioman Over a year ago

thought there was ; my bad

Collectives™ on Stack Overflow

Leakage out of `overflow:hidden` parent with rounded border in Chrome

4 Answers 4

1 Comment

1 Comment

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related