CSS transform

transform

使用会出现模糊问题；

<aside> 💡 元素的边缘应该和像素点对齐，但是元素作用了 transform: translate() 或者 transform: scale() 后的计算值产生了非整数计算的结果并非整数的像素点，导致本来一个像素能渲染的内容，没有完全归纳在其像素点内，导致出现模糊的情况；

</aside>

<aside> 💡 由于浏览器将图层拆分到 GPU 以进行 3D 转换，而非整数的像素偏移，使得 Chrome 在字体渲染的时候，不是那么的精确;

</aside>

示例

 

解决方法

• 放弃使用transform
• 如果确定宽、高的情况下，使 transform 计算后的值为 整数；
• webkit-font-smoothing: antialiased (未测试，不一定生效)；
• transfrom:translate(calc(-50% + 0.5px),calc(-50% + 0.5px));

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your teamhttps://serious-lose.notion.site/CSS-transform-0bc7173bb1fe4279bcec8c9ba5dbc58b