Modal's "transform: translate" to center it makes text blurry

[AAugustBentley]

We have a modal that has a few tabs with different data shown in a table.
However, text in a table becomes very blurry when adding a table height (so that it would not overflow and we would have a scrollbar to look through all entries in the table).

Even without height, it does not look clear enough.

I tried adding backface-visibility: hidden;, -webkit-font-smoothing: subpixel-antialiased;, overwritting transform with transform: translate(calc(-50% + 0.5px), calc(-50% + 0.5px)) and other things but nothing worked. I think this happens because with a lot of elements put in each other, those "transform translate" decimal sizes become worse than if they were on top level (for example, tabs' text looks fine).

The solution for now I came up with for now is removing transform and changing it to display: flex and then centering with justify-content and align-items in the modal's wrapper. The only problem I noticed with that is that if a modal has buttons with navigation when closing the current and loading another modal, there is a noticeable blinking.

Could anyone check this?

[mayank99]

hey @AAugustBentley, thanks for the issue. It is very hard to tell what part is blurred just from the screenshots and we don't have the ability to debug either. Could you try to recreate this scenario in a sandbox or at least share a deployed url? And could you also share information about your environment (OS, browser, screen resolution, zoom level)?

[HaveSpacesuit]

@mayank99 We experience this issue with modals that have tables in them in our app. Here is a code sandbox that can reproduce the issue. https://codesandbox.io/s/blurry-text-dialog-qf94c5?file=/src/App.tsx

It is more clear if you view it outside the code sandbox editor (https://qf94c5.csb.app/).

[AAugustBentley]

So it wasn't only for us. I failed to reproduce it at first, seems like adding height to modal prevents blurryness but then it is harder to keep content inside the modal without overflowing. https://codesandbox.io/s/itwinui-modal-blur-lldrsj

P.S. it is easier to see blurryness outside the editor

[mayank99]

Thanks for the repro. I was able to reproduce it in Chrome on Windows 11 (top) but not macOS 14 (bottom), even though they are on the same hardware and have the same CSS transform value.

Interestingly, rounding out the fractional transform value makes it unblurred, so I think that would be the simplest solution. I'm also looking into positioning it with flexbox or grid. One constraint there is that we want the dialog to be slightly above the vertical center rather than being in the dead center. I'll go with the rounding solution if this doesn't work out.

[mayank99]

Should be fixed in 3.0.6

[mattl-bentley]

@mayank99 I'm in the process of updating to 2.12.17 and noticed this issue. Can this fix be backported to 2x?

[mattl-bentley]

@mayank99 any updates on fixing this in 2x?

[mayank99]

this has been backported to 2.12.18

[mattl-bentley]

thanks @mayank99

[HaveSpacesuit]

@mayank99 It looks like this is still an issue when there is a table inside an expandable block. Not sure how common the use case is, but maybe it means there are other situations when it is a problem?

[mayank99]

It looks like this is still an issue when there is a table inside an expandable block. Not sure how common the use case is, but maybe it means there are other situations when it is a problem?

Are you able to create a repro?

[HaveSpacesuit]

It took a while, but I found that if you change height: 100dvh to height: 100% in the demo app, it causes blurriness. Unfortunately, trying to use height: 100dvh in my app doesn't seem to make any difference, so there are probably other things going on. (But this component is only used for QA anyway, so not an immediate issue for customers.)

https://stackblitz.com/edit/github-fsmjja

[mayank99]

I found that if you change height: 100dvh to height: 100% in the demo app, it causes blurriness

stackblitz.com/edit/github-fsmjja

Thanks for the repro. I'll reopen this issue as it was confirmed on Windows.

Some other interesting observations:

• I found that using dvh actually can sometimes make it less blurry?

  Recording

  Screen.Recording.2024-03-12.at.9.55.54.AM.mov

• @Ben-Pusey-Bentley found that removing the ExpandableBlock can sometimes fix the blurring.

  Recording

  Recording.2024-03-12.095301.mp4

---

But this component is only used for QA anyway, so not an immediate issue for customers.

This is good to know. I guess we'll keep an eye out for any similar future reports, and prioritize based on that. For now we can leave it be.

[AAugustBentley]

Started working on another modal and I still see problems with blurriness in tables, this time it's the icon button (in a sticky column) and information panel

Pulled the newest itwinui-react version (v3.6.0) just to check if it changes anything. This is going to be released for users, so maybe this item could be prioritized, please?

[HaveSpacesuit]

I also noticed a table in an info panel was blurry.

[AAugustBentley]

Started working on another modal and I still see problems with blurriness in tables, this time it's the icon button (in a sticky column) and information panel

Pulled the newest itwinui-react version (v3.6.0) just to check if it changes anything. This is going to be released for users, so maybe this item could be prioritized, please?

Reproduced code: https://stackblitz.com/edit/github-acfvki?file=src%2FApp.tsx

[mayank99]

Something common to Dialog/InformationPanel/ExpandableBlock is that they all use transform: translate. My guess is that when two or more such instances are combined, it can cause blurring.

Our team was able to confirm it in some situations (the repro links definitely help). But ultimately this is just a (minor) bug in Chrome on Windows. We can't address the root cause, only work around it.

So there isn't much we can do right now, but in the future we'll keep this in mind when we refactor our Dialog (and maybe other components) to use flex layout. This issue can remain open for now.

[AAugustBentley]

We made a workaround to not use transform from our side to fix blurriness issue, if anyone is interested. The only issue with this solution would be that the modal is going to be in the middle.

add css on modal wrapper _iui3-dialog-wrapper

then on the modal itself (iui-dialog)

[HaveSpacesuit]

Here is another example of blurry text on a tile inside a draggable dialog.
https://stackblitz.com/edit/github-rfuo7n?file=src%2FApp.tsx

[MrHBS]

Does adding will-change: transform; help?