Libera-Chat/libera-chat.github.io

Safari shows double arrows in nav menu

emersonveenstra opened this issue · 2 comments

emersonveenstra commented

Because we're using <details>, we're running into two things:

  1. WebKit adds a pseudo-element -webkit-details-marker that doubles the arrows, and removing it leads to:
  2. this WebKit bug where <summary> can't be a flex container, and it breaks the alignment.

Not sure if we want to wait until Safari releases a version that fixes it, or switch to a standard <nav>/<ul> structure for the menu.

arunabhp75 commented

@emersonveenstra, something similar was there for Chrome too, refer this. Can display:none be added to hide it ?

emersonveenstra commented

something similar was there was for Chrome too, refer this. Can display:none be added to hide it ?

You can, but the arrow is only half the problem, it's the fact that <summary> can't be a flex container. So the other arrow is still weirdly stacked on top of the text.