fix(button-group button): Update styling for Safari #360
Conversation
🦋 Changeset detectedLatest commit: 40a17dd The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
.changeset/nasty-hairs-live.md
Outdated
| '@crowdstrike/glide-core': patch | ||
| --- | ||
|
|
||
| Updates `glide-core-button-group-button` styling to resolve an issue on Safari |
There was a problem hiding this comment.
Rhetorically, what's the issue? Consumers probably want to know.
src/button-group.button.styles.ts
Outdated
| border-end-start-radius: 0.6875rem; | ||
| border-start-start-radius: 0.6875rem; | ||
| } | ||
| /* Nesting within :host does not work as expected in Safari */ |
There was a problem hiding this comment.
Got a link to a Webkit bug to put in this code comment?
There was a problem hiding this comment.
Its not clear if this is a bug or an inconsistency across browsers. This has been mentioned elsewhere:
https://stackoverflow.com/questions/77291748/webcomponent-nested-css-is-invalid
https://stackoverflow.com/questions/78747601/ios-osx-css-nesting-with-host-selector-not-working
There was a problem hiding this comment.
I wouldn't count Stack Overflow answers as evidence of it possibly not being a bug unless the answer cites the specification or cites a conversation among specification authors.
If it works in Chrome and Firefox but not Safari, then it's likely a bug.
Co-authored-by: clintcs <114178960+clintcs@users.noreply.github.com>
🚀 Description
glide-core-button-group-buttonstyling to resolve an issue on Safari📋 Checklist
🔬 How to Test
mainand compare with this branch using Safari and Chrome.📸 Images/Videos of Functionality
In Safari, before:
In Safari, after:
