Primer `select` visual bug in desktop Safari

[laserlemon]

Primer's documentation shows how to render Primer-styled selects and they are indeed pretty in the docs. See below:

But if I take the source of that example and put it in my own Primer-styled app (using @primer/css version 17.0.0), I get this instead:

Desktop:

Additional context

Looks great in latest Chrome and Firefox! Did not reproduce on iOS.

[simurai]

Hmm.. I can't really reproduce it. Here a Codepen to test it in isolation: https://codepen.io/simurai/pen/ccd192f89dd17ca74794bd3c98b7f265

It should render as

It might be because I'm using an updated version of Safari??? 🤔

[laserlemon]

    💭
🤔 Not a Safari version problem. Your Codepen renders correctly for me. Looks like the investigation starts on my side. I'll report back if what I find might reasonably affect other Primer users. Thank you!

[simurai]

@laserlemon Your Codepen renders correctly for me.

Ha.. Interesting. It seems to be caused by

css/src/forms/form-select.scss

Line 15 in debcdcd

appearance: none;

When removing the prefixed -webkit-appearance: none, Safari shows the native styling. We use autoprefixer to add the prefixed -webkit- version. So I guess you'll have these options:

1. Also use autoprefixer or similar when compiling the SCSS.
2. Load the already complied dist/primer.css.
3. Fix it by adding .form-select { -webkit-appearance: none; } manually.

[laserlemon]

🤯 Thank you for getting to the bottom of this! So importing SCSS Primer doesn't include this auto-prefixing, only if I configure my app to auto-prefix at CSS compilation time?

[simurai]

Yes, the SCSS is still un-prefixed and needs to be added while compiling to CSS.

I guess it depends a bit how your app would like to use Primer CSS.

• Using SCSS (option 1) is more flexible, like you could only import the components needed to reduce file size.
• Using CSS (option 2) is the quickest way to add all of Primer CSS.

[laserlemon]

Thank you for the context. We're using option #1 and are excluding the marketing styles. I'll check out changing our setup to add vendor prefixes on compilation. Thank you!