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

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

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

有人在聊天假定,也许孩子们第一次调整为.5,然后大一倍,使他们缩小到.5px,然后再从那里了.有没有办法确保它们被渲染的顺序使它们首先被缩放到2px然后减半？反对我更好的判断,我尝试用JS强制渲染顺序,但不出所料,这没有任何影响(尽管,有趣的是,底部元素确实保持其原始颜色).

如果做不到的话,那里还有其他解决方案吗？我不可能是唯一一个遇到这个问题的人.

它与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;
}