search

iTwin / iTwinUI

A design system for building beautiful and well-working web interfaces.
https://itwin.github.io/iTwinUI/
MIT License
104 stars 38 forks source link

Blurry text issues in tooltip and tile #49

Closed FlyersPh9 closed 2 years ago

FlyersPh9 commented 3 years ago

Tile:

After merging #37 (workaround for #44 ), the tile text always stays slightly blurry, instead of only becoming blurred for the transition period.

Tooltip:

After adding the frosted glass effect in #19, 2 different visual bugs show up. See #43 for additional context

  • [ ] Tooltip text is blurry if using CSS transforms
    • Workaround: iTwin/iTwinUI-react#25
  • [ ] Tooltip target element is also blurry on hover (when tooltip shows)

116114421-544c1480-a687-11eb-987d-0d6bb4e713fa

For now, the frosted glass effect has been removed (in #48) until this is solved.

Update: It seems that the current "translucent" effect is causing readability issues in light theme. See https://github.com/iTwin/iTwinUI-react/issues/142

Environment info: Windows 10, Chrome 89, itwinui-css@0.9.0, itwinui-react@1.1.0. macOS does not appear to have this issue.

FlyersPh9 commented 2 years ago

Closing this as an issue. We removed the frosted glass effect from tooltips for the time being & the blur is as minimized as we can get within tiles. We do have this bug in our backlog here to revisit at a later time.