Browser: Chrome 131.0.6778.87
OS: Windows
URL: Link
Hi bricks team,
If an svg icon has toggle offcanvas interactions, it will have an outline after clicking on it. This problem occurred after updating to version 1.11.1.
Thank you
Hi @HOSEIN,
I’ve only found one icon like that on your website, but when I tested, I could not get the issue you described.
Please watch the GIF below.
If this is happening to you when you are clicking on the same icon, can you tell me on which browser are you trying?
Thanks,
Matej
Hi Matej,
I have this problem in Chrome desktop / Android browser, and Samsung browser. But there is no problem in Firefox browser for Windows (I have not tested Firefox for Android).
I also did not test this on Mac and iOS browsers.
Hi,
Ah, I see it now. I was testing on Firefox, and that’s why I did not get this border/outline.
When I tested in Chrome, I see that this outline comes from :focus pseudo selector, and it’s a default from Chrome (note that “user agent stylesheet” on the right).
To solve this, you will have to add outline:none or whatever other value you want to the SVG element.
I’ve also marked this as a no bug, since it does not look that it’s a Bricks bug.
Thanks for reporting though!
Matej
Thank you Matej🙏,
When I tested in Chrome, I see that this outline comes from
:focuspseudo selector, and it’s a default from Chrome (note that “user agent stylesheet” on the right).
this doesn’t seem to be Chrome default behavior. For two reasons.
1- In addition to Chrome, this problem also occurs in Samsung browser.
2- More importantly than the previous reason, when I downgrade Bricks to version 1.11, the problem is solved!
Please check the above link again if possible. There is no problem with the icon.
Hi,
so, what you see there is default Chrome one. In previous versions, we overridden the default value, and made this way less apparent that it should be.
In the latest update though, we set the:focus-visible to auto, and that is what you see now.
Matej
1 Like