Allison Stafford Allison Stafford - 2 months ago 7
CSS Question

Why does clip-path inset(0 0 0 0) produce a different result than not setting clip path?

I'm creating an animation where a div rolls upward from a clip-path of inset(100% 0 0 0) to inset(0 0 0 0). However, there is a small gap that appears between the bottom of the div and the parent container. The parent's position is relative and the child's height is 100%. If I look at the developer's tools and check the height of the child and parent, they both match.

Where is the gap coming from?



body {
height: 100%;
width: 100%;
margin: 0 auto;
}
#main {
overflow: auto;
height: 64vh;
width: 38vw;
margin: 0 auto;
margin-top: 10%;
position: relative;
border: 1vh solid black;
overflow: hidden;
}
#left-col {
float: left;
width: 4%;
height: 100%;
margin-left: 46%;
background: black;
}
#right-col {
float: left;
width: 4%;
height: 100%;
margin: 0 auto;
margin-left: 0;
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
background: black;
}

<body>
<section id='main'>
<div id='left-col'></div>
<div id='right-col'></div>
<section>
</body>





If you'd like a visualization, check my Codepen:
http://codepen.io/sentedelviento/pen/NRGbya

The left-col does not have a gap, and seems to be positioned the same as the right-col, except its clip-path isn't set. This unwanted behavior continues when I switch and set the clip-path to the left column. There is again a gap. Why?

Answer

I can't tell you why, but it looks like a webkit bug with -webkit-clip-path and as far as I can see only happens in Chrome (I've tested it on Firefox, IE, Opera, and Chrome).

Try replacing the webkit -webkit-clip-path: inset(0% 0% 0% 0%); with -webkit-clip-path: rect(0% 0% 0% 0%);

or for: -webkit-mask-clip

or even just remove it.