CSS变换只在IOS上不工作

CSS Transform only not working on IOS

本文关键字：工作 IOS 变换 CSS      更新时间：2023-09-26

我正在制作一个网站，我希望它是完全移动响应。我以为我已经用标题实现了这一点，直到我用ipad看了看。"transtransform: translateX(-100%);"语句适用于除IOS设备之外的所有设备。我在我的安卓手机上试用了它，效果非常好。我尝试了很多东西，包括使用像-webkit这样的前缀和使用"!"重要"的声明。我一直在网上搜索，但我找不到任何解决我的问题。代码如下:

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的开发模式，结果两种方法都有效。

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

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

推理取自这个GitHub问题

我刚刚和苹果公司的一位工程师谈过这件事。他证实，当使用CSS3转场和关键帧动画时，2d和3d转换都是硬件加速的。我们不应该改变任何东西。

他确实澄清了当不使用过渡和关键帧动画时，2d转换元素不会加速以节省内存。但是，在我们的例子中，我们的过渡总是使用关键帧动画。

相关文章：