CSS transform: translate(-50%,-50%)导致的像素模糊问题解决办法

一、抛出问题

.modal-container {

    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 999;

}
.modal {

    position: absolute;
    top: 50%;
    right: 50%;
    margin: auto;
    transform: translat(-50%,-50%);
 }

以上代码,是做一个模态框,该模态框使用 Hack 方法来垂直竖直两个方向居中,但是在实际操作中,会发现,整个模态框的边缘,会出现模糊的现象,仿佛打了马赛克一样。

马赛克版:

CSS transform: translate(-50%,-50%)导致的像素模糊问题解决办法_第1张图片

清晰版:

CSS transform: translate(-50%,-50%)导致的像素模糊问题解决办法_第2张图片

可能上传的图片质量不高,但在我的电脑上差异非常明显

二、分析原因

经过查阅资料和一通分析,发现是CSS 的 transform: translate 属性在作元素位移时,极有可能发生像素点无法对其的情况,从而导致显示模糊的问题,画个灵魂示例图:

CSS transform: translate(-50%,-50%)导致的像素模糊问题解决办法_第3张图片

如图,正常情况下,元素的边缘应该和像素点对齐,但是经过 CSS translate 后,计算的结果并非整数的像素点,导致本来一个像素能渲染的内容,没有完全归纳在其像素点内,导致出现模糊的情况。

翻译成人话: css transform:translate(-50%,-50%) 计算后的结果很可能是 transform: translate( 100.5px, 100.5px),就因为 0.5 所以模糊

三、解决办法

方式有二

第一种: 在 transfrom 时,使用 calc 函数 加上0.5 px ,具体代码 : 

.modal {

    position: absolute;
    top: 50%;
    right: 50%;
    margin: auto;
    /** 这 0.5px加或者减都可以 */
    transform: translat(calc(-50% + 0.5 px), calc(-50% + 0.5 px));
 }

第二种,别 transform 了,直接父元素弄成 Flex 布局,两条轴都设置居中,也能达到效果。

你可能感兴趣的:(css)