絶対位置とパーセンテージを使用して子divを垂直方向に中央揃えするときのバグ

Question

私はそのdivを、自分の親divの直接中心に表示するようにアニメーション化している私の "ポップアップ"です。だから私は、ホバリングの-webkit-transform: translateY(-100%)でそれを単にアニメーション化できるように、絶対配置、負のマージン、およびleft + topを使用して配置します。 SafariとMobile Safariでうまく動作します。

ChromeまたはFirefoxでピクセルを使用する場合は、すべてのパーセンテージを使用しても親ピクセルの幅を設定してもうまく動作します。しかし、すべてのパーセンテージを使用すると、FF + Chromeは完全に二重になり、パーセンテージがわかりません。

Fiddle Example: SafariとFF/Chromeでこれを表示すると、#pixelsは#percentsと同じになり、両方でレンダリングする必要があります。これは間違ってレンダリングされているSafariですか？

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

と私の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; 
} 

まあ、私は追加のラッパーを追加することで、回避策を見つけました。私はまだこれを引き起こす原因を知りたいと思う。

My workaround: Fiddle 80％の幅と高さを使用する内側のdivの上端+余白を計算しないようにラッパーを使用します。

Answer 1

高さと最高パーセンテージは、その包含ブロックの高さ、つまりクラス "コンテナ"を持つdivに相対的です。包含ブロックの高さは、クラス "pretendImage"を持つdivの高さによって決まります。

幅、左余白率および左余白率は、その包含ブロックの幅（つまり、「コンテナ」クラスのdiv）に相対的です。包含ブロックの幅は、その包含ブロックのパーセンテージとして決定され、jsfiddleの場合、それ自体がビューポートの幅と同じ初期包含ブロックである。これは、あなたが必要と考えるパーセンテージを計算する方法ではありません。 position:relative（またはfloat:left;を使用）の要素をラップして縮小し、ビューポート内の要素を囲む別のラッパーdivを作成することで、これを処理できます。

奇妙なものは、マージントップ（およびマージンボトム）のパーセンテージです。これらはコンテナブロックの幅のの幅です。これは役に立たず、包含ブロックに既知の固定されたアスペクト比がないかぎり、これについて行うことはほとんどありません。この場合、幅とアスペクト比から必要な高さのパーセンテージ値を計算できます。

Safariが何をしているのか分かりませんが、真剣にバグがあるようです。

Answer 2

テストされているすべてのブラウザとモバイルデバイス（Chrome、IE、Firefox、Safari、iPad、iphone 5と6、Android）で私の作品は次のとおりです。

すべてのシナリオをカバーするために、以下のトランスフォームルールのグループ全体を確実に追加する必要があると思います。

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