Skip to content

Conversation

@camertron
Copy link
Contributor

@camertron camertron commented Jun 17, 2022

What are you trying to accomplish?

The new .FormControl styles work nicely, but the SVG mask used for select lists appears as a gray box in Webkit browsers like Chrome:

image

What approach did you choose and why?

According to caniuse, mask-* properties are only supported via the -webkit- vendor prefix. Adding the prefix appears to fix the problem:

image

What should reviewers focus on?

I had to tell stylelint to ignore the -webkit- prefix here, which feels dirty but I don't think there's another way.

Can these changes ship as is?

  • Yes, this PR does not depend on additional changes. 🚢

@camertron camertron requested a review from langermank June 17, 2022 21:53
@changeset-bot
Copy link

changeset-bot bot commented Jun 17, 2022

🦋 Changeset detected

Latest commit: acca0bf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/css Patch

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

@camertron camertron temporarily deployed to github-pages June 17, 2022 22:00 Inactive
@camertron camertron temporarily deployed to github-pages June 17, 2022 22:08 Inactive
@camertron camertron marked this pull request as ready for review June 17, 2022 22:12
@camertron camertron requested a review from a team as a code owner June 17, 2022 22:12
Copy link
Contributor

@langermank langermank left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting! We use autoprefixer for stuff like this, and I just double checked to see if this one got a prefix. You can search for it here.

We should consider how to handle this kind of thing for tools like Storybook and Lookbook.. we prefer to use source CSS, but dist contains extra stuff we're not exactly testing 🤔

@camertron
Copy link
Contributor Author

@langermank hmm ok interesting! Let me see if I can run autoprefixer automatically somehow.

@camertron
Copy link
Contributor Author

Closing in favor of primer/rails_forms@e562dfc

@camertron camertron closed this Jun 20, 2022
@camertron camertron deleted the fix_select_mask branch June 20, 2022 20:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants