CSS转换：在IOS上转换不正常

Question

我正在为登录页面添加一个响应按钮。按钮的响应性在其他移动设备上正常工作，但在IOS上无法正常工作。在我最初的调查中，我发现转换：translate（）在IOS中表现不正常。

我在IOS上的2个浏览器（谷歌浏览器和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（桌面）Inspect Element上显示的中心完美对齐。

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