bug: Dropdown for select on Safari uses serif font

[trepidacious]

What version of daisyUI are you using?

v3.6.4

Describe your issue

When select elements are styled with daisyUI (adding at least the select class), the dropdown they display will use a serif font on Safari. This doesn't match the usual macOS dropdown appearance or the rest of the website.

I'm seeing this on Safari Version 16.5.2 (18615.2.9.11.10), on macOS 13.4.1 (c) (22F770820d).

The examples on daisyui.com show this issue:

Unstyled select elements don't show this, e.g. on the MDN select page:

What browsers are you seeing the problem on?

Safari

Reproduction URL

https://daisyui.com/components/select/

[y4qub]

@trepidacious I tried to look at this issue and it seems like the semibold font weight variant is causing this problem on Safari. From what I've found out, in case the font in <select> is using semibold font weight (font-weight: 600), Safari for some reason always falls back to serif. This isn't the case if we try to set the font weight to normal, bold or if we change the font to a different one that doesn't have the semibold option at all as then it appears to use bold anyways in the dropdown. We can switch the daisyui theme to cyberpunk or wireframe to see this behavior as these two use custom fonts.

There might not be a way to set different font weights to the options dropdown and the selected option itself to keep it looking the way it is supposed to here. I also haven't found a way to make Safari use the specified fallback fonts.

As we can't directly target Safari from CSS, the only fix would probably be not to use the semibold font weight variant at all. However, because it seems to be Safari's internal fault, it would make more sense to ignore this for now than to change the look for all browsers because of this issue as it would create other inconsistencies.

[trepidacious]

@y4qub Thanks for looking into this - I can confirm I get the same results here, the only difference is cyberpunk also shows the issue for me, I think I might have semi-bold available for the font used.

I've also confirmed that the workarounds work on my page. For me, using bold weight isn't too bad. I can just build this into my theme.

I've submitted feedback to Apple just in case it might get fixed, I added a minimal reproduction (just needs -webkit-appearance: none and the font weight) at https://jsfiddle.net/6sLhyfbo/22/

I think your conclusion on not changing the appearance to work around a Safari bug makes sense. My only addition would be that there could be an argument for using bold rather than semi-bold regardless of the bug, since it's more likely to be present in fonts, so won't end up at different weights depending on which font is used? On the other hand, semi-bold does look good.