CSS trasformare: translate non funziona su iPad

Ho fatto un semplice sito web in costruzione che ha un'immagine e un testo centrato nel centro della pagina, come segue:CSS trasformare: translate non funziona su iPad

codice 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>

Codice

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

link: http://katteboxen.dk/

Tutto sta funzionando buono tranne quando si tratta di iPad. Il contenuto viene visualizzato come quando, ad esempio, la regola css transform: translate(-50%, -50%); non è stata applicata per il contenitore. Quali sono le alternative per risolvere questo problema? Qualsiasi guida o feedback è più che gradito.

fonte

2014-10-01 MariusNV

Cura di condividere uno screenshot? :) – Rvervuurt

@Rvervuurt [link] (http://i.imgur.com/yHvcA0n.jpg): D – MariusNV

Himanshu era più veloce (stavo ancora provando). La sua soluzione funziona. – Rvervuurt

trasformare proprietà sono basati su browser insieme di proprietà -webkit-transform, -moz-transform, -o-transform .... ans in modo da impostare secondo il vostro browser i-pad io questo risolverà il problema

o semplicemente usare

margin-left:-50%; 

margin-top:-50%;

fonte

2014-10-01 08:03:06 himanshu

Posso confermare che funziona. http://jsfiddle.net/z2j0hmr5/ (aperto sul mio iPad) Anche se si potrebbe voler fare un po 'di riposizionamento. – Rvervuurt

potrebbe essere necessario provare prefissi specifici del browser per trasformare proprietà, quindi:

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

dovrebbe fare il trucco.

Per riferimento uno sguardo here

fonte

2014-10-01 08:12:05 robjez

CSS trasformare: translate non funziona su iPad

risposta

Problemi correlati