Detailed explanation of the solution to font blur when using transform in CSS3

This question is very strange, so I will go straight to the code without saying much:

.g-dialog-wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: flex;
    flex-direction: column;
    width: 405px;
    background-color: #ffffff;
    height: 226px;
    -webkit-box-shadow: 0 0 2em #5191f1;
    -moz-box-shadow: 0 0 2em #5191f1;
    box-shadow: 0 0 2em #5191f1;
    border-radius: 3px;
    z-index: 9999;
  }

The above CSS style makes the font of the page so blurry:

I checked online and it seems that there is a problem with browser rendering. The value in transform cannot be set as the base, but I clearly stated that it is not the base:

transform: translate(-50%, -50%);

Later I made some changes and changed the width and height to even numbers.

width: 404px;
height: 226px; 

This is the end of this article on how to solve the problem of blurred fonts when using transform in CSS3. For more information about blurred fonts when using transform in CSS3, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. We hope that you will support 123WORDPRESS.COM in the future!