记录一次css使用transform出现了字体模糊的解决办法

做了一个悬浮框，发现字体显示的很模糊，看久了头晕。 代码如下

{
background-color: rgb(255, 255, 255);
display: grid;
visibility: hidden;
opacity: 0;
position: absolute;
top: calc(100% - 0.875rem);
min-width: 14.375rem;
border-radius: 0.9375rem;
box-shadow: rgb(19 15 53 / 10%) 0px 20px 50px -10px;
border: 1px solid rgb(233, 233, 233);
transform-style: flat;
transform-origin: center top;
transition: opacity 150ms ease 0s, visibility 150ms ease 0s, transform 150ms ease 0s;
left: 95%;
}

百度了一下发现是因为浏览器渲染有问题，设置width和height为偶数就可以了