CSS 倾斜和变换在 Chrome 和边缘上添加不需要的轮廓

Question

在这个例子中看到 https://jsfiddle.net/xozytmbv/5/ 有一个奇怪的 1px 深色边框（我假设背景是 #nav 项目。最初它存在于所有浏览器中。

我通过添加 translateZ(1px) 找到了 Firefox 的解决方案，如下所示 Unwanted outline on border when parent is transformed 但它不适用于 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（根据需要）：

Chrome 和边缘：

边框不仅在右侧可见，顶部和底部也可见，并且超出了 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>

CSS 倾斜和变换在 Chrome 和边缘上添加不需要的轮廓

CSS skew and transform adds unwanted outline on Chrome and Edge

html

css

webkit

css-transforms