Firefox 中转换元素上出现 1px 间隙 - 亚像素舍入问题

Question

将转换属性添加到 div 似乎会使 Firefox 将宽度值舍入到最接近的数字，从而使列之间出现间隙。

我制作了一个 jsFiddle 示例。在各种浏览器中调整 window 的大小，div 之间的间隙会出现和消失。在 Chrome Safari 或 IE 中不会发生这种情况。

这是错误还是我遗漏了一些特殊 css 属性？

所需代码

body{
    margin:0;
}
.item{
    transform:skewY(2deg);
    transition: transform .6s ease,  background .6s ease;
    width: 20%;
    height: 50px;
    float:left;
    background: red;
}

.item:hover{
    transform:skewY(5deg);
    background: darkblue;
}

<div class="wrap">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
    <div class="item">d</div>
    <div class="item">e</div>
</div>
<br />
<h1>resize my window</h1>

Answer 1

经过大量测试后，我设法通过添加 CSS:

这一行解决了我的问题

border-right: 1px solid transparent;

See here for the updated jsfiddle.

body {
  margin: 0;
}
.item {
  transform: skewY(2deg);
  transition: transform .6s ease, background .6s ease;
  backface-visibility: hidden;
  width: 20%;
  height: 50px;
  top: -20px;
  position: absolute;
  background: red;
  border-right: 1px solid transparent;
}
.a {} .b {
  left: 20%;
}
.c {
  left: 40%;
}
.d {
  left: 60%;
}
.e {
  left: 80%;
}
.item:hover {
  transform: skewY(4deg);
  background: darkblue;
}

<div class="wrap">
  <div class="a item">a</div>
  <div class="b item">b</div>
  <div class="c item">c</div>
  <div class="d item">d</div>
  <div class="e item">e</div>
</div>
<br />
<h1>resize my window</h1>

更新

此后我注意到此解决方法会产生一些问题：

扰乱其他浏览器
Border-right 使 .item 溢出其容器

我的解决办法是把所有东西都移到 firefox 中 "at-rule"

@-moz-document url-prefix() {
    .item{
        border-right: 1px solid transparent;
    }
    .item:last-of-type{
        border-right: 0;
    }    
}

See here for the updated jsfiddle.

body {
  margin: 0;
}
.item {
  transform: skewY(2deg);
  transition: transform .6s ease, background .6s ease;
  backface-visibility: hidden;
  width: 20%;
  height: 50px;
  top: -20px;
  position: absolute;
  background: red;
}

@-moz-document url-prefix() {
  .item {
    border-right: 1px solid transparent;
  }
  .item:last-of-type {
    border-right: 0;
  }
}

.b {
  left: 20%;
}
.c {
  left: 40%;
}
.d {
  left: 60%;
}
.e {
  left: 80%;
}
.item:hover {
  transform: skewY(4deg);
  background: darkblue;
}

<div class="wrap">
  <div class="a item">a</div>
  <div class="b item">b</div>
  <div class="c item">c</div>
  <div class="d item">d</div>
  <div class="e item">e</div>
</div>
<br />
<h1>resize my window</h1>

Firefox 中转换元素上出现 1px 间隙 - 亚像素舍入问题

1px gaps appearing on transformed element in Firefox - Subpixel rounding issue

css

firefox

css-transforms