Geek Answers Handbook

CSS conversion: translate does not work on iPad

I created a simple construction website that has an image and some text in the center of the page, for example:

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 works well, except when it comes to iPads. The content is displayed, for example, when, for example, the css transform: translate(-50%, -50%); rule transform: translate(-50%, -50%); not applied to container. What are the alternatives to fix this problem? Any recommendations or feedback are more than welcome.

+7
html css html5 css3 ipad
source share
2 answers

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

or just use

 margin-left:-50%; margin-top:-50%;
+4
source share

You may need to use certain browser prefixes for the transform property, so:

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

gotta do the trick.

For reference look here

+4
source share

More articles:


All Articles