Bug with CSS Transform Skew on iOS

Question

.calendar__nav a.arrow_up {
    top: 0;
}

.calendar__nav a {
    border: 0;
    background: transparent;
    position: absolute;
    width: 32px;
    height: 32px;
    display: block;
    left: calc(50% - 16px);
}

.calendar *, 
.calendar *:before,
.calendar *:after {
    box-sizing: border-box;
}

.calendar__nav a span {
    display: none;
}

.calendar__nav a.arrow_up:after, 
.calendar__nav a.arrow_up:before {
    border-top: 2px solid #666;
    content: '';
    display: block;
    width: 50%;
    position: absolute;
    top: 16px;
    z-index: 0;
    opacity: .87;
}

.calendar__nav a.arrow_up:before {
    right: 0;
    -webkit-transform: skewY(45deg);
    -ms-transform: skewY(45deg);
    transform: skewY(45deg);
}

.calendar__nav a.arrow_up:after {
    left: 0;
    -webkit-transform: skewY(-45deg);
    -ms-transform: skewY(-45deg);
    transform: skewY(-45deg);
}

<nav class="calendar__nav">
<a class="bx-prev arrow_up disabled" href="" role="button"><span>Up</span></a>
</nav>

I’m facing the following problem when rendering an element with Transform Rotate on iOS,the right edge is not displayed on iOS as on desktop, as shown below: