CSS Transform только не работает на IOS

Я делаю сайт, и я хочу, чтобы он был полностью мобильным. Я думал, что достиг этого с заголовком, пока не посмотрю на него с помощью своего ipad. «Trasnform: translateX (-100%)»; заявление работает на все, кроме устройств IOS, которые я пробовал на моем телефоне Android, и он работал отлично. Я пробовал много вещей, включая использование префиксов типа -webkit- и использование оператора «! Important». Я искал в Интернете, но я не могу найти ничего, что решает мою проблему. Вот код.CSS Transform только не работает на IOS

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

$(function() { 

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

});

UPDATE: Мой сайт был фактически кешированные так решили в режиме разработки с Cloudflare и получается, оба метода работы. Большое вам спасибо всем, кто так быстро реагировал в отличие от меня.

источник

2015-06-08 Murphy

Какая версия iOS? – TylerH

Кажется, я помню, что IOS не может/не может обрабатывать одномерные преобразования. Таким образом, 'translateX (-100%)' не работает, но 'translate (-100%, 0)' будет –

вы так дарили. Я думаю, что есть несколько старых сообщений, посвященных этому http://stackoverflow.com/questions/4919963/css3-transform-not-working –

Пока вы не должны иметь, вы можете попробовать translate3d(x,y,z) вместо translateX(x). Например:

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

Рассуждая берется из этого GitHub issue

Я просто говорил с одним из инженеров компании Apple относительно этого. Он подтвердил, что преобразования 2d и 3d аппаратно ускоряются при использовании переходов CSS3 и анимации ключевого кадра. Нам не нужно ничего менять.

Он прояснил, что, когда НЕ используют переходы и ключевые кадры для анимации, то 2d преобразованные элементы не ускоряются для сохранения памяти. Но в нашем случае наши переходы всегда используют анимацию ключевого кадра.

источник

2015-06-08 15:13:52 Stef

CSS Transform только не работает на IOS

ответ

Смежные вопросы