CSS skew and transform adds unwanted outline on Chrome and Edge

As seen on this example https://jsfiddle.net/xozytmbv/5/ there's a weird 1px dark border (I assume the background of #nav item. Initially it is present in all browsers.

I found a solution for Firefox by adding translateZ(1px) like shown here Unwanted outline on border when parent is transformed But it does not apply on Chrome or 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 (as wanted):

Chrome and Edge:

The border is visible not just on the right, but top and bottom and it exceeds outside the li.last.

Solution

Adjust the position of the :after element to have an overlap and avoid this. So intead of left:100% make it left:0 and adjust the 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>