使用变换防止模糊渲染：缩放

Question

我正在使用 transform 属性将div 向上缩放，但我想保持其子级（具有1px 宽度或高度）相同的大小。我用.5 对它们进行了反缩放，预期结果是1px 的元素缩放了2，然后是0.5，最终应该回到1px，但它们最终会变得模糊2px。

这是缩放前的方框：

.container {
    width: 200px;
    height: 200px;
    margin: 100px;
    background-color: #EEE;
    position: absolute;
}

.outline {
    position: absolute;
    background: #1899ef;
    z-index: 999999;
    opacity: 1 !important;
}

.outlineBottom, .outlineTop {
  width: 100%;
  height: 1px;
}

.outlineLeft, .outlineRight {
    height: 100%;
    width: 1px;
}

.outlineRight {
    right: 0px;
}

.outlineBottom {
    bottom: 0px;
}

<div class="container">
    <div class="outline outlineTop"></div>
    <div class="outline outlineRight"></div>
    <div class="outline outlineBottom"></div>
    <div class="outline outlineLeft"></div>
</div>

如您所见，边缘的元素是清晰的深色 1px 蓝色。不过，这是 缩放后的盒子的样子：

.container {
    width: 200px;
    height: 200px;
    margin: 100px;
    background-color: #EEE;
    position: absolute;
    transform: scale(2);
}

.outline {
    position: absolute;
    background: #1899ef;
    z-index: 999999;
    opacity: 1 !important;
    transform: scale(.5);
}

.outlineBottom, .outlineTop {
  width: 100%;
  height: 1px;
  transform: scale(1,.5);
}

.outlineLeft, .outlineRight {
    height: 100%;
    width: 1px;
    transform: scale(.5,1);
}

.outlineRight {
    right: 0px;
}

.outlineBottom {
    bottom: 0px;
}

<div class="container">
    <div class="outline outlineTop"></div>
    <div class="outline outlineRight"></div>
    <div class="outline outlineBottom"></div>
    <div class="outline outlineLeft"></div>
</div>

And here's a post-scaled render 来自 Chrome 41.0.2272.89 Mac，这是我正在运行的。

Adding transform-3d(0, 0, 0) 似乎没有帮助。使用zoom property 找到了solution，但由于zoom 没有得到很好的支持，我想避免这种情况。添加filter: blur(0px); 似乎也没有任何效果。

可能是posited in chat，孩子们首先缩放到.5，然后大小翻倍，导致它们缩小到.5px，然后从那里恢复。有什么方法可以确保它们呈现的顺序导致它们首先放大到2px，然后减半？与我更好的判断相反，我尝试了forcing the render order with JS，但不出所料，这没有任何效果（尽管有趣的是，底部元素确实保持了原来的颜色）。

如果做不到这一点，还有其他解决方案吗？我不可能是唯一遇到这个问题的人。

Answer 1

这与缩放元素上的默认transform-origin有关。对于任何正在转换的元素，它默认为50% 50%，但是在缩小1px 值时会出现问题，因为它必须将scale 居中在半个像素上，并且元素的渲染从这里开始就会出现问题。您可以在这里看到它与 transform-origin 移动到每个项目的相关极端的工作。

稍作研究表明，对于缩放最终将像素减半的任何维度的缩放元素，都会发生同样的模糊。

body {
    padding: 1em;
}

.container {
    width: 200px;
    height: 200px;
    margin: 100px;
    background-color: #EEE;
    position: absolute;
    transform: scale(2);
}

.outline {
    position: absolute;
    background: #1899ef;
    z-index: 999999;
    opacity: 1 !important;
}

.outlineBottom, .outlineTop {
    width: 100%;
    height: 1px;
    transform: scale(1, 0.5);
}

.outlineBottom {
    bottom: 0;
    transform-origin: 0 100%;
}

.outlineTop {
    transform-origin: 0 0;
}

.outlineLeft, .outlineRight {
    height: 100%;
    width: 1px;
    transform: scale(.5,1);
}

.outlineRight {
    right: 0px;
    transform-origin: 100% 0;
}

.outlineLeft {
    left: 0px;
    transform-origin: 0 0;
}

<div class="container">
    <div class="outline outlineTop"></div>
    <div class="outline outlineRight"></div>
    <div class="outline outlineBottom"></div>
    <div class="outline outlineLeft"></div>
</div>