CSS трансформация: перевод не работает правильно на IOS - PullRequest
Новая
       327

CSS трансформация: перевод не работает правильно на IOS

0 голосов
/ 26 марта 2019

Я добавляю отзывчивую кнопку на свою целевую страницу. Отзывчивость кнопки работает правильно на другом мобильном устройстве, но не на IOS. В ходе моего первоначального исследования я обнаружил, что transform: translate () не работает должным образом в IOS.

Я пробовал это в 2 браузерах (Google Chrome и Safari) на IOS. Но возникает та же проблема.

Я также пытался добавить -webkit-, но, похоже, ничего из этого не работает.

Я также использую Bootstrap 4.2.

Вот пример того, что я пытался сделать: 

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

Как показано в моем примере кода, я попытался отцентрировать кнопку, используя transform: translate(-50%);, положение кнопки находится далеко от центра. Слишком сильно выровнено справа. Но он прекрасно работает на устройствах Android.

Я ожидаю, что он будет идеально выровнен по центру, как показано в Google Chrome (на рабочем столе) Inspect Element.

1 Ответ

2 голосов
/ 26 марта 2019

Произошла синтаксическая ошибка для вашего CSS.Вы забыли добавить "."перед именами ваших классов

проверьте эту скрипку

здесь идет скрипка 

.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;
 }
...