Geek Answers Handbook

Why does inserting a clip (0 0 0 0) produce a different result than setting a clip?

I am creating an animation in which the div moves up from the insertion clip of the insert (100% 0 0 0) to the insert (0 0 0 0). However, there is a small gap that appears between the bottom of the div and the parent container. Parental position is relative, and the height of the child is 100%. If I look at the developer tools and check the height of the child and parent, they both match.

Where is the gap?

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 want to visualize check out my Codepen: http://codepen.io/sentedelviento/pen/NRGbya

The left column has no clearance and is apparently located in the same way as the right column, except that its clip path is not defined. This unwanted behavior continues when I switch and set the clip path to the left column. Again a space. What for?

+5
source share
2 answers

I canโ€™t say why, but it looks like a webkit error with -webkit-clip-path , and as far as I can see, this only happens in Chrome (I tested it in Firefox, IE, Opera and Chrome).

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

or for: -webkit-mask-clip

or just delete it.

+3
source

This is a clip-path rounding error. Try changing the width of your code window and you will see.

I did a screencast to show: http://somup.com/cDQroDC3h

0
source

More articles:


All Articles