.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 experiencing the following problem when rendering an element with transform rotate on iOS, the right border is not displayed on iOS as on the desktop, as shown below: