🐞 - Artifact in experimental navigation component
yigsvnsla opened this issue · comments
Description
Hello everyone, I am using the documentation of the experimental components, to be specific the navigation component and this in your example # 1 has a detail that is very noticeable to the user, it is simply a black line that is floating and that is not represented in any of the DOM components to be able to target it and perform a hot modification and that is also displayed in my local development environment
Playing for a while with the dom, its styles and reading the source code of the components, I found that this detail is shown because it has a "tui-scrollbar" component wrapping the content of the "aside" component, since it has a opacity effect to make the component next to the scrollbar visually attractive
It's funny (not hate) that to have the content encapsulated within aside the footer component has a "margin-top:auto", without taking into consideration the visual characteristic of the "tui-scrollbar" component
A quick solution that can be done as a hot fix is for this component that surrounds the content scroll to take the entire height of the component, and thus be able to move the blur effect along with that visual artifact to the bottom in the case of not having more elements overloading the content of the aside and that in this case, if the content is made scrollable, the artifact may be less noticeable in the user's view.
Style sheet file the Aside Navigation Experimental Component
Angular version
^17.2.0
Taiga UI version
^3.67.0
Which browsers have you used?
- Chrome
- Firefox
- Safari
- Edge
Which operating systems have you used?
- macOS
- Windows
- Linux
- iOS
- Android
Thank you for investigating it. Seems to be Chrome rendering bug. We'll see what can be done about it.