transform: skew在Firefox中导致元素之间的间隙

Question

transform: skew在Firefox中导致元素之间的间隙

4

当我使用transform:skew时，在Firefox中会导致div之间出现间隙，但在Chrome中不会。

编辑：我已经动画化了div的高度，以使间隙更加明显，因为在所有值下它都不可见。

Firefox在左边，Chrome在右边

@keyframes test {
  0% { height: 50px; }
  100% { height: 100px; }
}

div {
  background: black;
  width: 100px;
  height: 50px;
  transform: skew(10deg);
  animation: test 4s infinite;
}

<div></div>
<div></div>

目前为止的失败解决方案包括：backface-visibility: hidden、outline: 1px solid transparent、border: 1px solid transparent，负边距以及scale: 1.01<- 此方法在示例中有效，但在我的项目中会出问题，就像边距一样。

- DvdRom

可能与抗锯齿有关？当我放大时，有时可以清楚地看到间隙，但在其他情况下，间隙非常暗灰色（rgb（10,10,10））。 - Julia

间隙在哪里？每个浏览器的代码检查器都说了什么？你没有使用一些CSS重置吗？ - Mister Jojo

@MisterJojo 这个间隔出现在两个div之间。当缩放时，它可能会更明显或更不明显，就像Julia所提到的那样。它在使用normalize和不使用normalize时都会出现。 - DvdRom

我在Firefox（Linux Debian）上缩放到500%时，没有看到任何间隙。 - Mister Jojo

您可以通过截屏并在上面使用选色器来进行检查。 - DvdRom

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- the Hutt · Accepted Answer

我认为这与浏览器在渲染时如何舍入分数有关。如果值被舍入下来，那么div将呈现1像素较短。因此会有1像素的间隙。有关更多详细信息，请参见：
CSS中的子像素问题
浏览器如何处理高度和宽度的非整数值？

body {
  padding: 1rem;
}

@keyframes test {
  0% {
    height: 50px;
  }
  100% {
    height: 100px;
  }
}

div {
  background: black;
  width: 100px;
  height: 50px;
  transform: skew(10deg);
  animation: test 4s infinite;
  
  position: relative;
}

div::before {
  content: '';
  position: absolute;
  inset: -1px;
  background-color: inherit;
}

<div></div>
<div></div>

旧版本尝试：一种解决方法可能是使用drop-shadow或box-shadow：

@keyframes test {
  0% { height: 50px; }
  100% { height: 100px; }
}

div {
  background: black;
  width: 100px;
  height: 50px;
  transform: skew(10deg);
  animation: test 4s infinite;
  
  /*filter: drop-shadow(0 -1px 1px black);*/
  box-shadow: 0 0px 1px 1px black, inset 0 0px 1px 1px black;
}

body {
 padding:1rem;
}

<div></div>
<div></div>

这里我们在 div 的顶部投下 1px 的阴影。这样它就会用相同的颜色填补间隙。

注意：drap-shadow() 和 box-shadow 之间有区别。根据情况使用适合自己的方法。