Strange outline around skewed pseudo element in button - css

Question

I'm using a pseudo element in a button to achieve an angled border. But in some browsers and some zoom levels, if you look closely you'll see a faint outline around the pseudo element towards the right of the button on the left edge of the pseudo element.
Here is the fiddle: https://jsfiddle.net/jw1kfmsh/
.button {
position: relative;
padding: 0 20px;
height: 53px;
background-color: red;
border: 4px solid black;
border-right-width: 0;
color: white;
font-weight: 900;
font-size: 14px;
transition: all .425s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
z-index: 1;
filter: blur(0);
}
.button::after {
position: absolute;
content: '';
right: -19px;
top: -4px;
height: 53px;
width: 38px;
background-color: red;
border: 4px solid black;
z-index: -1;
border-left: 0;
transform: skew(-31deg);
transition: all .425s ease;
backface-visibility: hidden;
}
Button Text

Answer 1

I would consider a different idea where you will not have the issue. Make the shape as only one element and rely on overflow to hide the non needed part.
.button {
position: relative;
display:inline-block;
padding: 0 40px 0 20px;
line-height: 53px;
border-left: 4px solid black;
color: white;
font-weight: 900;
font-size: 14px;
text-decoration: none;
overflow:hidden;
z-index: 0;
}
.button::after {
position: absolute;
content: '';
right:0;
top: 0;
left:-5px;
bottom:0;
background: red;
border: 4px solid black;
z-index: -1;
transform: skew(-31deg);
transform-origin:top;
}
Button Text