CSS偏斜和变换会在Chrome和Edge上添加不需要的轮廓

Question

如本例Very interesting implementation所示，有一个奇怪的1px黑色边框（我假设#nav项目的背景。最初它出现在所有浏览器中。

我通过添加translateZ(1px)找到了Firefox的解决方案，如此处所示https://jsfiddle.net/xozytmbv/5/但它不适用于Chrome或Edge。

#nav {
    background-color: #183650;
    overflow: hidden;
}
ul {
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
}
li {
    padding: 9px 0;
  list-style: none;
}
li.last,
li.first {
    background: none transparent;
    position: relative;
}
li.last::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 1000px;
  height: 100%;
  background-color: #20bef2;
}
li a {
    border: none;
    color: #FFF;
    text-transform: uppercase;
    font-size: 17px;
    letter-spacing: 1px;
    padding: 0.75em 0.7em;
}
li.last {
    background-color: #20bef2;
    border-left: 3px solid #FFF;
}
li a {
  text-decoration: none;
}
li a:hover {
    background: none transparent;
}
li:last-child {
    background-color: #20bef2;
    transform: translateZ(1px) skew(-15deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
li:last-child a {
    transform: translateZ(1px) skew(15deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

Firefox（按需）：

Unwanted outline on border when parent is transformed

Chrome和Edge：

边框不仅在右侧，而且在顶部和底部可见，并且超出li.last之外。

Answer 1

调整:after元素的位置以重叠并避免这种情况。因此，left:100%的内容使其成为left:0并调整z-index：

#nav {
  background-color: #183650;
  overflow: hidden;
}

ul {
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
}

li {
  padding: 9px 0;
  list-style: none;
}

li.last,
li.first {
  background: none transparent;
  position: relative;
}

li.last::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0; /*changed this */
  z-index:-1; /*Added this*/
  width: 100vw;
  height: 100%;
  background-color: #20bef2;
}

li a {
  border: none;
  color: #FFF;
  text-transform: uppercase;
  font-size: 17px;
  letter-spacing: 1px;
  padding: 0.75em 0.7em;
}

li.last {
  background-color: #20bef2;
  border-left: 3px solid #FFF;
}

li a {
  text-decoration: none;
}

li a:hover {
  background: none transparent;
}

li:last-child {
  background-color: #20bef2;
  transform: translateZ(1px) skew(-15deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

li:last-child a {
  transform: translateZ(1px) skew(15deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

<div id="nav">
  <ul>
    <li class="first"><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li class="last"><a href="#">Item</a></li>
  </ul>
</div>