CSS Transform only not working on IOS

Question

I am making a website and I want it to be completely mobile responsive. I thought I had achieved that with the header until I had a look at it with my ipad. The "Trasnform: translateX(-100%);" statement works on everything except IOS devices I tried it on my android phone and it worked perfectly. I have tried plenty of things including using prefixes like -webkit- and using the "!important" statement. I have been searching around the web but I can't find anything that solves my problem. Here's the code.

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

});

UPDATE: My website was actually cached so opted into development mode with Cloudflare and turns out both methods work. Thank you so much to everybody who responded so quickly unlike me.

I seem to recall that IOS cannot / could not handle single dimension transforms. So `translateX(-100%)` doesn't work but `translate(-100%,0)` would — Paulie_D, Jun 08 '15 at 15:08
did you give like this. I think there is some old posts referenced about this http://stackoverflow.com/questions/4919963/css3-transform-not-working — Rahul S, Jun 08 '15 at 15:09
@RahulS There are no inline elements being transitioned here. — TylerH, Jun 08 '15 at 15:12
Thank you for all the answers and suggestions. I have tried all of them but they don't work. Should I contact Apple directly or should I just create the mobile header another way (I am a noob so I need a link to a tutorial) ? — seepp, Jun 08 '15 at 16:07
@TylerH I am using IOS 7.02 on my ipad and I have tried with IOS 8.1. Both have the same result. I should also add that I have tried with Safari and Chrome. — seepp, Jun 08 '15 at 16:11

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

While you shouldn't have to, you might want to try translate3d(x,y,z) instead of translateX(x). For example:

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

Reasoning is taken from this 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 Transform only not working on IOS

1 Answers1