CSS 仅转换不适用于 IOS

Question

我正在制作一个网站，我希望它能够完全响应移动设备。我以为我已经用 header 实现了这一点，直到我用我的 ipad 看到了它。 "Trasnform: translateX(-100%);" 语句适用于除 IOS 设备之外的所有设备我在 android phone 上尝试过它并且效果很好。我尝试了很多方法，包括使用 -webkit- 之类的前缀和使用“!important”语句。我一直在网上搜索，但找不到任何可以解决我的问题的方法。这是代码。

HTML

<!DOCTYPE html>
<h<html lang="en">

<head>
    <title>Home</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Alegreya+Sans' rel='stylesheet' type='text/css'>
    <script src="http://timthumb.googlecode.com/svn/trunk/timthumb.php"></script>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
    <script src="js/header.js"></script>
</head>

<body>
    <div class="header">
        <div class="container">
            <div class="logo">
            </div>
            <div class="wrapper">
                <div class="menu-icon">
                    <div class="line first"></div>
                    <div class="line second"></div>
                    <div class="line third"></div>
                </div>
                <div class="nav">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="http://4para.net/forums">Forums</a></li>
                        <li><a href="about-us.html">About Us</a></li>
                        <li><a href="role-finder.html">Role Finder</a></li>
                        <li><a href="orbat.html">ORBAT</a></li>
                    </ul>
                </div>
            </div>  
        </div>
    </div>

    <div class="container">
       <div class="featured">
            <h1 class="devMode"> Development Mode</h1>
        <p class="devModeText">Our 100% mobile friendly website is still under development. If you would like to provide feedback or suggestion please post them <a href="http://4para.net/forums/showthread.php?tid=28" target="window">here</a>, anything is helpful!</p>
        </div>

      </div>    


</body>

</html>

CSS

@media screen and (max-width: 810px) {

/*header*/
.nav {
    margin: 15px -40px ;
    background-color: #3f3f3f;
    transform: translateX(-100%);
    transition: 0.6s ease;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);

} 

.menu-icon {
    position: relative;
    margin-left: 10px;
    display: block;
    height: 54px;
    width: 54px;
    background-color: #2a2a2a;
    /*border: 0.75px solid #000;*/
    border-radius: 50%;
}

.line {
    width: 38px;
    height: 2px;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.logo {
    float: right;
}

.nav ul li {
    list-style: none;
    display: block;
    padding: 10px 120px 10px 30px;

}   

.open {
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
}

.first {
    position: relative;
    top: 15px;
    margin: auto;
} 

.second {
    position: relative;
    top: 20px;
    margin: auto;
}

.third {
    position: relative;
    top: 25px;
    margin: auto;
} 
 /*end of header*/

 .container  {
    margin: 0 10px 0 10px; 
 }
}

JS

$(function() {

$('.menu-icon').on('click', function(){
$('.nav').toggleClass('open');
});

});

更新：我的网站实际上被缓存了，所以选择了 Cloudflare 的开发模式，结果这两种方法都有效。非常感谢所有像我这样迅速回复的人。

Answer 1

虽然您不应该，但您可能想尝试 translate3d(x,y,z) 而不是 translateX(x)。例如：

-webkit-transform: translate3d(-100%,0,0);

推理取自于此GitHub issue

I just spoke to one of the engineers at Apple regarding this. He confirmed that both 2d and 3d transformations are hardware accelerated when using CSS3 transitions and keyframe animations. We shouldn't have to change anything.

He did clarify that when NOT using transitions and keyframes to animate, that 2d transformed elements are not accelerated to save memory. But, in our case, our transitions always use keyframe animation.

CSS 仅转换不适用于 IOS

CSS Transform only not working on IOS

javascript

html

ios

css

transform