CSS 转换：翻译在 IOS 上的行为不正确

Question

我正在向我的着陆页添加一个响应式按钮。该按钮的响应能力在其他移动设备上正常工作，但在 IOS 上不正常。在我最初的调查中，我发现 transform: translate() 在 IOS 中的行为不正常。

我已经在 IOS 上的 2 个浏览器（Google Chrome 和 Safari）上进行了尝试。但是同样的问题也会出现。

我也尝试添加-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（桌面）检查元素上显示的中心完美对齐。

Answer 1

您的 CSS 存在语法错误。你忘了加“。”在你的班级名称之前

检查这个小提琴

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