Fehler, wenn absolute Position und Prozentwerte verwendet werden, um Kinddiv vertikal zu zentrieren

Question

Ich habe ein div, das mein "popup" ist, das ich animiere, um in der direkten Mitte seines Elterndivs zu erscheinen. Also verwende ich absolute Positionierung, negative Ränder und links + oben, um es so zu positionieren, dass ich es einfach mit -webkit-transform: translateY(-100%) auf Hover animieren kann. Funktioniert hervorragend bei Safari und Mobile Safari.

Wenn Sie Pixel in Chrome oder Firefox verwenden, funktioniert es gut, auch wenn Sie alle Prozentsätze verwenden, aber die Eltern-Div-Breite mit Pixeln einstellen, funktioniert es. ABER, wenn Sie alle Prozentwerte verwenden, scheint FF + Chrome komplett zu verschenken und die Prozentsätze basierend auf etwas zu berechnen, was ich nicht herausfinden kann.

Fiddle Example: Sehen Sie dies in Safari und FF/Chrome, um zu sehen, dass Safari #pixels genauso darstellt wie #percents ist und in beiden gerendert werden soll. Ist es Safari, das das dann falsch darstellt?

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

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

Nun fand ich eine Abhilfe durch eine zusätzliche Wrapper hinzufügen. Ich würde trotzdem gerne wissen, was das verursacht.

My workaround: Fiddle Verwendet einen Wrapper, um zu vermeiden, dass die oberen + Ränder des inneren div berechnet werden müssen, das 80% Breite/Höhe verwendet.

Answer 1

Höhe und obere Prozentsätze beziehen sich auf die Höhe ihres umschließenden Blocks - d. H. Das div mit Klasse "container". Die Höhe des umschließenden Blocks wird durch die Höhe des div mit der Klasse "pretendImage" bestimmt.

Breite, links und margin-links Prozentsätze sind relativ zur Breite ihres umschließenden Blocks - d. H. Das div mit der Klasse "container". Die Breite des umschließenden Blocks wird als Prozentsatz seines umschließenden Blocks bestimmt, der im ersten Fall der anfängliche umschließende Block ist, der selbst der Breite des Ansichtsfensters entspricht. Dies ist nicht, wie Sie die Prozentsätze berechnen, die Sie denken, dass Sie brauchen. Sie können dies umgehen, indem Sie das Element, das position:relative ist (display:inline-block; oder float:left;), umhüllen und ein weiteres Wrapperdiv außerhalb dieses Elements erstellen, um die Elemente im Ansichtsfenster mit einem Leerzeichen zu versehen.

Der seltsame ist der Rand oben (und Rand-unten) Prozentsätze. Diese sind relativ zu der Breite des Containerblocks. Dies ist nicht hilfreich, und es kann wenig getan werden, es sei denn, der umschließende Block weist ein bekanntes und festes Seitenverhältnis auf. In diesem Fall könnten Sie den prozentualen Wert der benötigten Höhe aus der Breite und dem Seitenverhältnis berechnen.

Keine Ahnung, was Safari macht, aber es klingt ernsthaft fehlerhaft.

Answer 2

Das funktioniert bei mir auf allen getesteten Browsern und mobilen Geräten (Chrome, IE, Firefox, Safari, iPad, iPhone 5 und 6, Android).

Ich denke, Sie müssen nur sicherstellen, dass die gesamte Gruppe von Transformationsregeln unten für alle Szenarien abdecken.

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