Safari percent width calculate wrong, 1px filcker from its parent - html

Question

.projects {
position: relative;
background-color: black;
li {
position: relative;
width: calc(100% / 3);
display: inline-block;
cursor: pointer;
vertical-align: top;
overflow: hidden;
.bg-placeholder {
position: relative;
width: 100%;
img {
position: relative;
display: block;
width: 100%;
height: auto !important;
}
}
.bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) $time;
img {
position: relative;
display: block;
width: 100%;
height: auto !important;
}
}
.gradient {
position: absolute;
// width: 100%;
height: 80%;
left: -2px;
right: -1px;
top: auto;
bottom: -1px;
transform: translate3d(0,0,0);
transition: height cubic-bezier(0.165, 0.84, 0.44, 1) $time;
img {
height: 100%;
}
}
.content {
position: absolute;
width: 100%;
bottom: 0;
height: 35%;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.content-titles {
position: relative;
text-align: center;
width: 98%;
z-index: 2;
span {
font-size: 15px;
line-height: 1.4;
transition: opacity ease $time;
opacity: 0.7;
display: inline-block;
}
}
.content-title {
span {
font-family: "Gotham-Bold";
color: #fff;
text-transform: uppercase;
}
}
.content-sub-title {
margin-top: 3px;
span {
font-family: "Gotham-Book";
color: #d5a83d;
}
}
}
.cover-up {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
// opacity: 0;
// visibility: hidden;
// background-color: #000;
// transition: all ease $time;
display: flex;
justify-content: center;
align-items: center;
z-index: 3;
.text {
position: relative;
width: 100%;
text-align: center;
transform: translateY(100%);
opacity: 0;
visibility: hidden;
transition: all ease $time;
span {
display: inline-block;
font-family: "Gotham-Light";
color: #fff;
font-size: 24px;
text-transform: uppercase;
color: #d5a83d;
}
}
}
.desktop &:hover {
.bg {
transform: scale(1.12);
transition: all 0.3s ease;
}
.gradient {
height: 200%;
transition: all 0.3s ease;
}
.content{
.content-titles {
span {
opacity: 1;
}
}
}
.cover-up {
.text {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
}
}
}
Under some conditions, the projects dom looks like -1px offest to its parent. Why does this happen? Just occurs in safari, chrome & ff work just fine.
The red background-color in pic 1 is the color I gave to .projects 's parent dom. I found the red line mainly caused by translate3d(0,0,0) in .gradient, but if I remove this style, the hover effect will shake.
Please help me, Thanks!