CODEWITHSUNDEEP
htmlcssipad
MariusNV
MariusNV

Reputation: 320

CSS transform: translate not working on iPad

I've made a simple under construction website which has an image and some text centred in the middle of the page like following:

HTML Code: 

<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 Code:

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

Link: http://katteboxen.dk/

Everything is working good except when it comes to iPads. The content is showing like when for example the css rule transform: translate(-50%, -50%); wasn't applied for the container. What are the alternatives for fixing this issue? Any guidance or feedback is more than welcomed.

Upvotes: 8

Views: 13253

Answers (2)

robjez
robjez

Reputation: 3788

You might need to try browser specific prefixes for transform property, so:

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

should do the trick.

For reference have a look here

Upvotes: 6

himanshu
himanshu

Reputation: 1797

transform property are browser based property set -webkit-transform, -moz-transform, -o-transform .... ans so set it according to your i-pad browser i this it will solve the problem

or just use 

margin-left:-50%;

margin-top:-50%;

Upvotes: 5

Related Questions