Chrome leak when rounded border in `overflow:hidden` parent is exceeded

Question

Chrome leak when rounded border in `overflow:hidden` parent is exceeded

Even with a rounded parent element, the hidden part of a child element continues to appear in Chrome:

In Internet Explorer, adding the CSS property z-index to the parent element can solve this issue. However, this solution does not work in 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/

html css google-chrome

Answer 1

Answer №1

To utilize the -webkit-clip-path feature in certain versions of Chrome, you can clip a child element to match the boundaries of its parent, effectively preventing the cursor from changing outside of the parent element:

#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>

Answer 2

To utilize the -webkit-clip-path feature in certain versions of Chrome, you can clip a child element to match the boundaries of its parent, effectively preventing the cursor from changing outside of the parent element:

#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>

Answer 3

Answer №2

You might find this solution helpful.

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 matches the 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>

Answer 4

You might find this solution helpful.

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 matches the 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>

Answer 5

Answer №3

A simple HTML representation of parent and child elements is shown here. The parent has the CSS property overflow: hidden, causing any part of the child element that extends beyond the boundaries of the parent to be clipped. However, the child element itself is not hidden. This raises the question of how the child element is expected to remain within the parent div if it is not hidden.

By swapping the parent and child div elements, you can visualize how the HTML structure would change.

#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 wish to hide the child div, you should use the CSS property display: none for it.

Answer 6

A simple HTML representation of parent and child elements is shown here. The parent has the CSS property overflow: hidden, causing any part of the child element that extends beyond the boundaries of the parent to be clipped. However, the child element itself is not hidden. This raises the question of how the child element is expected to remain within the parent div if it is not hidden.

By swapping the parent and child div elements, you can visualize how the HTML structure would change.

#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 wish to hide the child div, you should use the CSS property display: none for it.

Answer 7

Answer №4

If you're looking to provide support for Internet Explorer, utilizing clipPath may be beneficial:

#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>

Answer 8

If you're looking to provide support for Internet Explorer, utilizing clipPath may be beneficial:

#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>

Chrome leak when rounded border in `overflow:hidden` parent is exceeded

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

CSS3 List Style Floating Challenge

Upon clicking a link, the webpage will automatically scroll to a specific point

What is the best way to place a list within a <div> element?

Manipulating Images with jQuery: Adding and Removing Images Without Affecting Text

Is it possible to simultaneously toggle buttons and submit a form?

Changing the name of a specific attribute in a JSON Object for showcasing it in an HTML Table

Issues with a responsive website not displaying correctly in the Firefox browser

Cross-Origin Resource Sharing (CORS) for HTML

Is it possible to remove strings within HTML elements?

Can you make two columns in CSS that are left floated and maintain their original order?

"Easily toggle the visibility of values in checkboxes and organize them into groups with the power of JavaScript

Change the width of the webpage inside the iframe

The custom CSS file is not being recognized

Div's background image displays flawlessly on Code Pen desktop, yet fails to appear when viewed on mobile devices

Create a triangular shape to fit on the right side of a 'li' element

Place a div element immediately following a table row in the HTML document

Determine the top margin of an element

Using the power of jQuery to load Ajax content, unfortunately, the content remains

Creating dynamic web content using KaTeX and Node.js

I'm facing an issue with my 'root' div on ReactJS - it doesn't stretch all the way to the top. Any suggestions on how I can make it expand properly