🐞 - Flickering Elevated UI Element and Button on Screen Load

[em-sargsyan]

Playground Link

No response

Description

When navigating to the screen containing a UI element with the attribute tuiSurface="elevated" and a button, the element and button flicker briefly. This issue occurs because the styles are not applied immediately, causing a visible glitch where the elements momentarily appear without proper styling before stabilizing.

Angular version

17.3.9

Taiga UI version

3.93.0

Which browsers have you used?

• Chrome
• Firefox
• Safari
• Edge

Which operating systems have you used?

• macOS
• Windows
• Linux
• iOS
• Android

[em-sargsyan]

2024-08-30.16.27.25.mov

[r0ss0neri]

I can confirm the same (similar?) problem in version 4.6.0. Can be reproduced directly on demo page.

Screen.Recording.2024-09-13.at.23.33.20.mov

A workaround is to disable transition.

[waterplea]

The visuals are based on data-appearance attribute which is immediately bound to the element. However for some reason something happen to trigger CSS reflow between DOM element being added to the page and setting of that attribute which causes the transition from no appearance to primary appearance. How that we have Appearance directive in control of this across all components we can solve it inside of it, either by somehow not having a transition from [tuiAppearance]:not([data-appearance]) to [tuiAppearance][data-appearance] or by only enabling transitions after it is fully initialized.