html - 弹出窗口问题的 css transform() 中心定位

Question

找到了一种有趣的方法来在应用程序中制作居中弹出窗口(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%) 行的责任。有人遇到过同样的问题吗？有什么解决办法吗？

Answer 1

嗯，这确实是一个很好的解决方案，因为它不需要您知道定位容器的宽度和高度。如果你知道它们，你可以用适当的负边距替换转换:

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

这是 fiddle ，看看这些问题是否仍然出现:http://jsfiddle.net/bcbpc6ey/

如果他们这样做，那么问题可能是由内部浏览器缩放算法引起的，您无能为力，因为浏览器就是这样工作的。

但是，如果将转换转换为边距后问题消失，那么您可能遇到了一些抗锯齿问题，这些问题是由将弹出窗口的渲染移至 GPU 引起的。由于 transform 是众所周知的硬件加速 CSS 属性之一，为了使其运行流畅，浏览器通常将这些元素移动到一个单独的层中，而不是完全由 GPU 处理，GPU 速度更快，但通常会导致一些伪像(主要在字体和缩放上可见元素)。