Bug quando si utilizza la posizione assoluta e le percentuali al centro verticale div bambino

Question

Ho un div che è il mio "popup" che sto animando per mostrare nel centro diretto della sua div genitore. Quindi utilizzo il posizionamento assoluto, i margini negativi e left + top per posizionarlo in modo da poterlo semplicemente animare con lo -webkit-transform: translateY(-100%) al passaggio del mouse. Funziona alla grande su Safari e Mobile Safari.

Se si utilizzano i pixel in Chrome o Firefox, funziona correttamente, anche se si utilizzano tutte le percentuali ma si imposta la larghezza del genitore utilizzando i pixel funzionerà. MA, se usi tutte le percentuali, FF + Chrome sembra andare completamente a castello e rendere le percentuali basate su qualcosa che non riesco a capire.

Fiddle Example: Visualizza questo in Safari e FF/Chrome per vedere che il rendering di Safari #pixels è lo stesso di #percents e deve essere visualizzato in entrambi. E 'Safari che sta rendendo questo torto allora?

<div class="container"> 
    <div class="pretendImage"></div> 
    <div id="percents"></div> 
</div> 

e la mia CSS:

#percents { 
    width:100%; 
    height:100%; 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin:-50% 0 0 -50%; 
} 
.container { 
    position:relative; 
    width:50%; 
    height:auto; 
} 
.pretendImage { 
    width:200px; 
    height:200px; 
} 

Beh ho trovato una soluzione con l'aggiunta di un involucro supplementare. Mi piacerebbe comunque sapere che cosa causa questo.

My workaround: Fiddle Utilizza un wrapper per evitare di calcolare i margini superiori + del div interno che utilizza l'80% di larghezza/altezza.

Answer 1

L'altezza e le percentuali superiori sono relative all'altezza del rispettivo blocco contenitore, ovvero il div con "contenitore" di classe. L'altezza del blocco contenitore è determinata dall'altezza del div con la classe "pretendImage".

Le percentuali di larghezza, di sinistra e di margine sinistra sono relative alla larghezza del relativo blocco contenitore, ovvero il div con il "contenitore" di classe. La larghezza del blocco contenitore è determinata come percentuale del suo blocco contenitore, che nel caso jsfiddle è il blocco contenitore iniziale, che è esso stesso uguale alla larghezza del viewport. Non è così che stai calcolando le percentuali che ritieni necessarie. È possibile gestirlo restringendo l'elemento che è position:relative (utilizzare display:inline-block; o float:left;) e creare un altro wrapper div esterno per distanziare gli elementi nella finestra.

Quello strano è la percentuale del margine superiore (e del margine inferiore). Questi sono relativi alla larghezza del blocco contenitore. Questo non è utile, e c'è poco che si può fare a questo proposito a meno che il blocco contenitore non abbia un rapporto di aspetto noto e fisso, nel qual caso è possibile calcolare il valore percentuale dell'altezza necessaria dalla larghezza e dal rapporto di aspetto.

Non ho idea di cosa stia facendo Safari, ma suona seriamente buggato.

Answer 2

Ecco cosa funziona per me su tutti i browser e dispositivi mobili testati (Chrome, IE, Firefox, Safari, iPad, iphone 5 e 6, Android).

Penso che sia necessario assicurarsi di aggiungere l'intero gruppo di regole di trasformazione di seguito per coprire tutti gli scenari.

img.ui-li-thumb { 
    position: absolute; 
    left: 1px; 
    top: 50%; 

    -ms-transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 
    -moz-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
    transform: translateY(-50%); 
}