CODEWITHSUNDEEP
csssafaritransform
Kevz
Kevz

Reputation: 634

CSS transform: translate not behaving correctly on IOS

I am adding a responsive button to my landing page. The button's responsiveness works properly on other mobile device but not on IOS. On my initial investigation, I found out that transform: translate() does not behave properly in IOS.

I have tried it on 2 browsers (Google Chrome and Safari) on IOS. But the same problem occurs.

I also tried adding -webkit- but none of it seems to be effective.

I also use Bootstrap 4.2.

Here is a sample of what I have tried to do:

landing-btn {
    position: absolute;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    padding: 15px 40px;
    font-size: 3rem;
    line-height: 1.3333333;
}

<div class="container-fluid">
    <div class="text-center">
        <img class="img-fluid image-center hero-image" src="/assets/img/OPTIMIZEDWebBanner.jpg" alt="landing image">
        <button id="banner-storenow-homepage" type="button" class="btn btn-orange btn-lg landing-btn" onclick="document.location.href='/order/kahon/selection/';">Store Now</button>
    </div>
</div>

JS Fiddle Link

As shown in my sample code, I tried to center the button using transform: translate(-50%); the position of the button is way off the center. It is aligned too much on the right. But it works just fine on Android Devices.

I expect it to be perfectly aligned to the center as shown on Google Chrome (desktop) Inspect Element.

Upvotes: 0

Views: 789

Answers (1)

Rajesh
Rajesh

Reputation: 272

There was a syntax error for your CSS. you forgot to add "." before your class names

check this fiddle

fiddle goes here

.landing-btn {
 position: absolute;
 transform: translate(-50%);
 -webkit-transform: translate(-50%);
 padding: 15px 40px;
 font-size: 2rem;
 line-height: 1.3333333;
 left:50%;
 top:50%;
 }

.hero-image{
 object-fit: cover;
 height: 600px;
 }

Upvotes: 2

Related Questions