iOS issue with webkit transform

[Anders_Skaarup_Chris (Anders Skaarup Christiansen)]

Hi,

I have an issue with Safari with webkit transform.

I’am using following to center text elements in Webflow: Center class on screen vertical / horizontal - #2 by vincent

The settings work and seems fine when looking in Browser Inspector where the code is deployed (not hosting using webflow), and off course also in Webflow Preview. The code works on android/chrome devices, but on iOS/Safari devices, the elements is not vertically and horizontal centered.

The text is placed inside a DIV, when a Interaction function when Hover on the image the text also appear.

Could it be the interaction which makes the issue?

The css:

.ls-lkb-hover-div {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-color: hsla(0, 0%, 100%, .24);
}

.ls-lkb-row-hover-cta-btn {
position: relative !important;
top: 50% !important;
display: block !important;
margin-right: auto;
margin-left: auto;
-webkit-transform: translate(0px, -50%);
-ms-transform: translate(0px, -50%);
transform: translate(0px, -50%);
color: #000;
font-size: 38px;
font-weight: 700;
text-align: center;

[Anders_Skaarup_Chris (Anders Skaarup Christiansen)]

I have just tried to change the top from percentages to px, it moved the position. But then i need to change this for all styling sheets manual afterwards, and can’t seem to be right that it is the only solution

[Anders_Skaarup_Chris (Anders Skaarup Christiansen)]

I figured it out myself.

My position should be absolut and there should be top: 50%, left and right 0. It now works.