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

Question

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

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

差距来自哪里？

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

如果你想要一个可视化,请检查我的Codepen:http://codepen.io/sentedelviento/pen/NRGbya

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

Answer 1

Dan*_*bes 3

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

尝试将 webkit 替换-webkit-clip-path: inset(0% 0% 0% 0%);为-webkit-clip-path: rect(0% 0% 0% 0%);

或用于：-webkit-mask-clip

甚至只是将其删除。

归档时间：	9 年，8 月前
查看次数：	292 次
最近记录：	9 年，8 月前