NO BUG: Button icon disappears on when used in navbar

Bugs
1

Browser: Chrome 110
OS: macOS
URL: https://renad.hadyhayman.com/

Came across this bug where if I use a button with an SVG icon in the navbar, and in the site with the same icon the icon disappears when the navbar burger menu shows up (I have it on tablet and below)

I tried creating a duplicate icon in the media, one to use in the navbar button and one for other buttons on the site but it still occurs.

2

Well, sh*t. That is a fun bug you’ve unearthed. I don’t have a fix/solve for you. While playing around with it, I observed that the icon does in fact go missing. It’s not visible on screen although the markup is present but no rules are hiding it or clipping it that I can see.

I went through these steps to see if I could get the icon to appear at all

  • I removed the missing icon’s markup
  • I copied the icon from the demo button
  • I pasted the copied icon into the button with the previously missing icon and saw it was visible.
  • I added CSS to change the fill color of the path to #fff and the stroke color of the circle to #fff and it was showing regardless of whether the mobile nav was open or not. Screenshot
    I’m not proposing this as a fix, obviously something fishy is happening there.
3

Yes! Thank you for attempting. I tried playing with it to figure out what was up but couldn’t tell. There are no CSS styles applied to it on the tablet breakpoint even when inspecting it, it just turns ghost while still taking up its space.

What’s strange is, it doesn’t happen to the black arrow so it has to be linked to the white arrow SVG, but even using different SVG files for the nav/body buttons still didn’t fix it. Still linked somehow even though the SVGs are different media files.

However, the icon is still showing in the navbar button, even on mobile. It does show for a split-second on the regular button after closing the navbar so it has something to do with the navbar being open/closed.

4

Hi @hadyhayman ,

I noticed that your SVG is using clip-path and also clipPath ID
Please try to remove those clip path on your SVG file and this should fix it.
image

Regards,
Jenn

5

Hi @itchycode ,

The code is exported from Figma, so I suspect this will happen to others, but I’ll edit it and remove that manually. Thank you!

But why does it get clipped on the hamburger menu breakpoint, only when the menu is closed? Does it mean if I have to use the same icon in the navbar and body of any website I have to edit the SVG code? Or is this still a workaround for a bug?

6

Hi @hadyhayman ,

This isn’t a bug in Bricks.
Clip Path ID must be unique just like any element’s ID attributes.
If you use the same Clip Path ID on different SVG, once visibility:hidden style applied on it, all of the other SVGs will be affected as well.

Suggest you find a solution in Figma.
Example: Figma SVG export creates ID conflicts on clipPath elements—workarounds? - #3 by Derek_Briggs - Ask the community - Figma Community Forum

Reference:

Hope this explains it :slight_smile:

Regards,
Jenn

1 Like
7

Jenn out here doing the good work! Great catch.