CSS user-select none property not effective in Safari

[glenvan]

Describe the bug

Shoelace uses user-select: none; to prevent users from accidentally selecting text inside of non-editable UI Components (buttons, tags, etc.). Safari, bafflingly, still doesn't recognize that property without the -webkit- prefix.

This is a bigger problem on the desktop than mobile as it's much easier to accidentally drag across widget text with a mouse than on a touch device.

Apple Webkit-based views also exhibit this behaviour.

To Reproduce

Steps to reproduce the behavior:

1. Load any sample shoelace widget in Safari
2. Click within the widget text and drag across the text
   • On mobile, a long-press would be equivalent
3. Observe that the standard user-select: none; property is not effective, and text within the component is selected

Demo

UI components like with non-editable text that expect mouse interaction like <sl-button> are the most obvious thing to try.

Screenshots

Browser / OS

• OS: macOS Sonoma 14.0
• Browser: Safari
• Browser version: 17.0

Additional information

It's fairly easy to work around this issues by adding -webkit-user-select: none; to Shoelace components in your app's own stylesheet, but of course you have to do your homework within Shoelace to find components that need it.

The fix is simple enough, just add a -webkit-user-select: none; fallback wherever user-select: none; appears in Shoelace's CSS.

[claviska]

Thanks. TIL. Fixed in #1655.

[glenvan]

Thanks. TIL. Fixed in #1655.

Thank you, that's record turnaround. Works a treat in Safari now!