菱形网格图像的MAC OS问题

Question

我正在尝试使用菱形图像创建网格。在chrome，IE，Firefox和Opera上，一切看起来都不错，但是在Safari上，图像似乎溢出了。

这是html

<div class = "main-bg full pd-b-30">
    <div class="grid">
      <div class="grid-item"><div class="grid-inner"><img src = "https://www.calilo.gr/images/triangle_1.jpg"></div></div>
      <div class="grid-item"><div class="grid-inner"><img src = "https://www.calilo.gr/images/triangle_2.jpg"></div></div>
      <div class="grid-item"><div class="grid-inner"><img src = "https://www.calilo.gr/images/triangle_3.jpg"></div></div>
      <div class="grid-item"><div class="grid-inner"><img src = "https://www.calilo.gr/images/triangle_4.jpg"></div></div>
      <div class="grid-item"><div class="grid-inner"><img src = "https://www.calilo.gr/images/triangle_5.jpg"></div></div>       
    </div>
</div>

和CSS

.grid {
width: 100%;
max-width: 900px;
margin: 0 auto;
}

.grid::after {
content: "";
display: block;
clear: both;
}

.grid-item {
width: 21.833%;
padding-bottom: 21.833%;
overflow: hidden;
-webkit-overflow: hidden;
float: left;
background: #BBB;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin: 5.5%;
margin-top: -11%;
}

.grid-item:nth-child(1),
.grid-item:nth-child(2),
.grid-item:nth-child(3) {
margin-top: 5%;
}

.grid-item:nth-child(5n+4) {
margin-left: 21.9%;
}

.grid-item:nth-child(5n+6) {
clear:left;
}

.grid-item:nth-child(5n+6):last-of-type {
margin-left: 38.25%;
}
.grid-inner img{
margin-left: -25%;
margin-top: -25%;
}
.grid-inner {
box-sizing: border-box;
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: rotate(-45deg);
text-align: center;
font-size: 2em;
}

从这里https://codepen.io/alexandros-meidanis/pen/rQVXQP，您可能会看到在工作的浏览器中的外观。谢谢您的帮助