Menu
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?
312
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.
79
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
