我正在使用 transform 属性将一个 div 进行缩放,但我想保持其子元素(具有 1px 宽度或高度)的大小不变。我通过反向缩放它们 0.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>
这是来自我正在运行的Chrome 41.0.2272.89 Mac的后缩放渲染图
添加transform-3d(0, 0, 0)
似乎没有帮助。找到了一个解决方案, 使用了zoom
属性, 但由于zoom
支持不好,我想避免使用它。添加filter: blur(0px);
也似乎没有任何效果。
有人在聊天中提出,也许孩子们首先被缩放到.5
,然后才加倍,导致它们被缩小到.5px
,然后再从那里放大。 有没有办法确保它们呈现的顺序会先被放大到2px
,然后再减半?尽管我不太确定,但我试图使用JS强制渲染顺序,但并不奇怪的是,这没有任何效果(尽管有趣的是,底部元素仍保持其原始颜色)。
如果失败了,还有其他解决方案吗? 我肯定不是唯一遇到这个问题的人。