Question

我使用transform属性缩放div，但我想让它的子节点（宽度或高度1px）保持相同的大小。我按.5计算了它们，预期结果是1px元素缩放2，然后.5，最终会返回1px，但它们会结束模糊2px。

这是缩放之前的方框：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

如您所见，边缘处的元素是一个清晰的深1px蓝色。这是缩放后框的内容：

＆＃13;
＆＃13;
.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; }
＆＃13;
<div class="container"> <div class="outline outlineTop"></div> <div class="outline outlineRight"></div> <div class="outline outlineBottom"></div> <div class="outline outlineLeft"></div> </div>
＆＃13;
＆＃13;
＆＃13;

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

Adding transform-3d(0, 0, 0)似乎没有帮助。使用solution找到zoom property，但由于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>

使用transform：scale来防止模糊渲染

1 个答案: