CSS transform: перевод не работает на iPad

Я сделал простой строящийся веб-сайт, который имеет изображение и текст, сосредоточенный в середине страницы, как показано ниже:

HTML-код: 

<body>
    <div id="container">
        <span id="wip">Under Construction</span>
        <img id="image" src="katte.jpg">
        <span id="text">Glæd dig, her åbner katteboxen.dk i foråret 2015. Vi glæder os til at forkæle din kat med en spændende pakke hver måned.</span>
    </div>
</body>

код CSS:

body {
    margin: 0;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
    text-align: center;
}
#container {
    max-width: 1230px;
    width: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#image {
    width: 100%;
}
#text {
    font-size: 20px;
    padding: 0 15px;
    display: block;
}
#wip {
    font-size: 40px;
    padding: 0 15px;
    display: block;
}

ссылка:http://katteboxen.dk/

все работает хорошо, за исключением случаев, когда дело доходит до iPads. Содержание показывает, как, например, когда правило css transform: translate(-50%, -50%); не было применено для контейнера. Каковы альтернативы для исправления этого проблема? Любое руководство или обратная связь более чем приветствуются.

7
css css3 html html5 ipad

2 ответов

transform свойство на основе браузера свойства set-webkit-transform, -moz-transform, -o-transform .... ans так установить его в соответствии с вашим браузером i-pad я это решит проблему

или просто использовать 

margin-left:-50%;

margin-top:-50%;
4

вам может потребоваться попробовать определенные префиксы браузера для свойства transform, поэтому:

-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

следует сделать трюк.

Для справки посмотри здесь

6