六角形css渲染相当糟糕的safari（移动版）

Question

不知道为什么会发生这种情况，但不知何故，我的六角形代码在我的手机上渲染不好，似乎是在创建后形状和之前的形状之间留下一个空格来生成六边形，这里是截图它的外观：

这是我六角形的实际css代码：

CSS

.hexagon1 {
position: absolute;
left: 50%;
transform: translate(-50%);
-webkit-transform: translate(-50%); 
width: 106px; 
height: 61.20px;
background-color: #02cd68;
margin: 30.60px 0;
top:44px;
cursor: pointer;
transition: box-shadow 0.2s ease-in-out;
}

.hexagon1:hover {
box-shadow: 0px 0px 40px #02cd68;
}

.hexagon1:before,
.hexagon1:after {
 content: "";
 position: absolute;
 width: 0;
 border-left: 53px solid transparent;
 border-right: 53px solid transparent;
 }

 .hexagon1:before {
 bottom: 100%;
 border-bottom: 30.60px solid #02cd68;
 transition: box-shadow 0.2s ease-in-out;
 }

 .hexagon1:after {
 top: 100%;
 width: 0;
 border-top: 30.60px solid #02cd68;
 transition: box-shadow 0.2s ease-in-out;
 }

 .hexagon1:hover:after {
 top: 100%;
 width: 0;
 transition: box-shadow 0.2s ease-in-out;
 }

任何可能出错的建议？我不打算在我的IOS设备上在Safari上正确渲染它？因为它似乎正在使用桌面版的Safari，Firefox和Chrome