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

Question

我正在div使用transform属性进行扩展,但我希望保持其子(具有1px宽度或高度)相同的大小.我反算了它们.5,预期的结果是一个1px按2缩放的元素,然后是.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>

这是来自Chrome 41.0.2272.89 Mac 的后缩放渲染,这就是我正在运行的.

添加transform-3d(0, 0, 0)似乎没有帮助.使用该属性找到了一个解决方案,但由于没有得到很好的支持,我想避免这种情况.添加似乎也没有任何效果.zoomzoomfilter: blur(0px);

有人在聊天假定,也许孩子们第一次调整为.5,然后大一倍,使他们缩小到.5px,然后再从那里了.有没有办法确保它们被渲染的顺序使它们首先被缩放到2px然后减半？反对我更好的判断,我尝试用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>