Interesting Problem Blurred Text

Screenshot by author

This article is about the blurred text problem and solution that occurs when applying overflow: auto to a dialog centered with transformdue to the long content.

The issue

We encountered this issue with a warning from the operations team after switching from Material UI to components we wrote. The text appears blurry in “Başkasına Ata” dialog, one of the new screens we have implemented. Just being in a dialog made it awkward.

First, we had to define the problem. We had another situation like this; The problem was not on our computers. Our first thought was that it was due to the difference in the operating system. It does not happen with Mac OS, it happens on Windows machines, but when Mehmet Can Boz said that I also have the same problem, our argument was disproved. Doğan Öztürk, Mehmet Can, and I started to work together to investigate the issue and its solutions.

Solution attempts

We started by investigating why it happens in the new dialog that there is no problem when making the dialog with Material UI. We examined the Material UI dialog, but nothing came out of it. One of the reasons we left Material UI was that the code that came out was not very understandable.

Then Doğan Öztürk shared a StackOverflow link. Accordingly, we have decided that such a problem is due to Chrome and transform. When we asked if it happens in different browsers, we learned that other browsers have similar issues. We realized that it is not browser-related. However, we saw that the problem was solved when we removed the transform definitions. We have found that one of the causes of the problem is transform.

Mehmet Can Boz shared a medium post that provides a solution with Javascript. However, we need more than this code to solve our problem. However, having this problem on Mehmet Can’s computer allowed us to solve this problem together as a pair. Together we tried the solutions on stackoverflow above one by one.

transform: perspective(-1px);

-webkit-font-smoothing: subpixel-antialiased;

transform: translateZ(0);

backface-visibility: hidden;

will-change: transform;

zoom : 150%;

filter: blur(.0px);

Last this try

display: table

We tried, and the problem was solved. Then we saw that this solution fixed the situation as it overrides the dialog overflow: auto definition, and we also gave up on that. Because in our dialog component, the content was extended, and this solution was causing another problem. Our problem was apparent. Problem;

— transform: translate(-50%, -50%)
— overflow: auto
—position: fixed

Deleting even one of these definitions would solve the problem.

You can see in these computed values that both `height` and `top` are non-integer values. Thus the elements are trying to snap between pixels, anti-aliasing kicks in, and the element turns blurry. In theory, fixing these values should resolve the anti-aliasing.

— How to Fix Blurry Elements that Have “position: fixed”

With position:fixed we could not apply averaging solutions with display: flex and display: grid.

The Solution

Lastly, we thought of the method we used to center the fields before transform: translate(-50%, -50%) position:fixed. The method is to subtract 50% of the defined left value by half of the specified width.

.dialog {
  position: fixed;
  overflow: auto;
  width: 900px;
  left: calc( 50% — 450px);
 top: 50px;
}

The only problem with this method was that it was necessary to define a fixed width. Since this was not the problem in our case, we implemented this solution. We solved this problem with this method. If you have tried other methods and found a solution, please share it in the comment section.

Join Us

Do you want to be a part of our growing company? We’re hiring! Check out our open positions from the links below.

https://careers.trendyol.com/