I've got 99 problems and Safari is one

I never use Safari myself, always Firefox, Chrome or Edge. And the same applies to everyone at work using the tools I build. But when I was going to test some fallback functionality for using CSS Anchor, I for once tested in Safari instead of Firefox, and I noticed some quirks not present in any other browser.

The missing icons

The navigation is collapsed by default, showing only icons. In Safari, only a few icons were shown.

The SVG icons looked like this:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
	....
</svg>

Solution: add width and height

I could not really find out the exact reason, but I guess it is something in Safaris rendering engine that needs the width and height attributes set. So this will show the SVG icons in Safari:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32">
	....
</svg>

The text that should not overflow

When the navigation is collapsed, the width of the flyout is set to 0, and the overflow set to hidden. But the text inside the flyout was still showing in some cases.

The reason was that we had used overflow-x: hidden;, since we do want the text to overflow vertically, but not horizontally.

.flyout {
	overflow-x: hidden;
	overflow-y: auto;
}

Solution: restructure CSS

Safari does not enjoy the overflow-x property for some reason, but setting overflow:hidden to the base class and overflow-y:auto when the flyout is open works as expected.

.flyout {
	overflow: hidden;

	&.open{
		overflow-y: auto;
	}
}

The boldest of them all

We use a custom font for all headings with the weight set to 600. Safari interprets this as it shall make the font bold, which causes the text to be double bold.

Solution: font-synthesis

Luckily, we can add a small CSS rule to fix this:

* {
	font-synthesis: none;
}

Conclusion

Safari continues to be the Internet Explorer of the 2020s, but at least it's usually fixable.