Browser: Chrome 110
OS: Windows
→ The text from the link disappears (Header _Google Chrome 2023-...) There will be no text inside of the dropdown content
Hi Tobias,
Thanks so much for your report!
Where exactly do you add the class? To the nav nestable element, or to the dropdown link?
Best regards,
timmse
I add the gradient on :hover to the th-header__links class.
This class is added to the “Nav links” items. There it works perfectly.
If this class is added to the “Dropdown” item, it does not work. Any gradient applied to Text makes the dropdown text disappear.
Therefore it is not added to the nav nestable element because that would make all text links on hover gradient. But again, if you would do that, also the “Dropdown” text would disappear on hover.
Basically the moment you add to the Dropdown item a gradient on apply to “Text” and give it a “color”, the text disappears. Also inside the dropdown content.
Ok, now I understand what it’s all about.
How the text gradient is created
To add the gradient to the text, the text-fill-color must be set to transparent. Then the text is given a background-image (that contains the gradient) and told that the gradient should only take place within the text (background-clip).
Because the dropdown element is a parent element, the text-fill-color is inherited by the children, so they also get a transparent text-fill-color, making them invisible.
Solution
You can easily work around this problem by adding the following CSS to the dropdown element (or the nav nestable element) to override the transparent value.
root .brx-dropdown-content * {
-webkit-text-fill-color: currentColor;
}
From that point of view, it is not a bug. Let’s wait and see if we get more reports on this. Then we can decide if we want to add this as a default.
Best regards,
timmse
Thank you @timmse .
That solves the disappearance of the content inside the dropdown.
But not for the .brx-dropdown-toggle. It still disappears.
