Question

我正在创建一个动画，其中div从插入路径（100％0 0 0）向上滚动到插入（0 0 0 0）。但是，div的底部和父容器之间会出现一个小间隙。父母的位置是相对的，孩子的身高是100％。如果我查看开发人员的工具并检查孩子和父母的身高，他们都会匹配。

差距来自哪里？

＆＃13;

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;
}

＆＃13;

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

＆＃13;

如果您想要可视化，请检查我的Codepen： http://codepen.io/sentedelviento/pen/NRGbya

左侧col没有间隙，并且似乎与右侧col相同，除了它的剪辑路径未设置。当我切换并将剪辑路径设置为左列时，这种不需要的行为会继续。还有一个差距。为什么？

Answer 1

我不能告诉你为什么，但它看起来像-webkit-clip-path的webkit错误，据我所知，只在Chrome中发生过（我在Firefox，IE，Opera和Chrome上测试过它））。

尝试使用-webkit-clip-path: inset(0% 0% 0% 0%);

替换webkit -webkit-clip-path: rect(0% 0% 0% 0%);

或for：-webkit-mask-clip

甚至只是删除它。

Answer 2

这是clip-path的舍入误差。尝试更改您的codepen视图的宽度，您将看到。

我制作了一个截屏视频：http://somup.com/cDQroDC3h

为什么clip-path inset（0 0 0 0）产生与不设置剪辑路径不同的结果？

2 个答案: