3

アプリケーションで中央揃えのポップアップ ウィンドウ ( http://www.w3.org/Style/Examples/007/center )を作成する興味深い方法を見つけました。シンプルで見栄えの良いコード ( http://jsfiddle.net/babaca/6rwL0v0c/22/ )。

html

<div class="__holder">
    <div class="__box">
        <h2>Some header</h2>
        Some bunch of content etc
    </div>
</div>

CSS

.__holder {
    position: fixed;
    z-index: 15000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-color: rgba(0,0,0,.5);
}
.__box {
    position: absolute;
    z-index: 16000;
    top: 50%;
    left: 50%;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    margin-right: -50%;
    padding: 0;

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

    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 18px 3px rgba(0, 0, 0, .07);
       -moz-box-shadow: 0 0 18px 3px rgba(0, 0, 0, .07);
            box-shadow: 0 0 18px 3px rgba(0, 0, 0, .07);

    padding: 29px;
}

レンダリングに関する唯一の問題: ブラウザー ウィンドウのズーム レベルに応じて、水平または垂直の側面がシャープではないか、2 ピクセル間で滑らかに/ぼやけています... (chrome バージョン 39.0.2171.95 m 、firefox 34.0.5 ) ここにあります例（ウィンドウの左右を滑らかにしたもの）：

ここに画像の説明を入力

私が理解したように、それはtransform: translate(-50%, -50%)ラインの責任です。誰でも同じ問題に遭遇しましたか？解決策はありますか？

4

1 に答える 1

3

ポジショニング コンテナーの幅と高さを知る必要がないため、これは確かに優れたソリューションです。それらを知っていれば、 transform を適切な負のマージンに置き換えることができます:

margin-left: -90px; // half of the popup width
margin-top: -45px; // half of the popup height

これらの問題が引き続き発生するかどうかを確認してください: http://jsfiddle.net/bcbpc6ey/

その場合、問題はおそらく内部ブラウ​​ザのスケーリング アルゴリズムが原因であり、ブラウザがそのように動作するため、何もできません。

ただし、transform を margin に切り替えた後に問題が解消された場合は、ポップアップのレンダリングを GPU に移動したことによって発生したアンチエイリアシングの問題が発生した可能性があります。変換は一般的に知られているハードウェア アクセラレーション CSS プロパティの 1 つであるため、スムーズに実行するために、ブラウザーはそのような要素を GPU によって完全に処理されるよりも高速な別のレイヤーに移動することがよくあります。要素)。

于 2014-12-26T20:52:52.903 に答える