Streaming live at 10am (PST)

iOS issue with webkit transform


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

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;

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

I figured it out myself.

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

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.