Skip to content

Conversation

adamwathan
Copy link
Member

Resolves #215.

In Chrome 62, a user agent stylesheet change was made on macOS that gave all button-ish elements a 4px border radius. This is annoying.

Other discussions:

necolas/normalize.css#706
primer/css#388
twbs/bootstrap#24093

We tried to "fix" this by taking all of the selectors Chrome was targeting:

input[type="button" i],
input[type="submit" i],
input[type="reset" i],
input[type="file" i]::-webkit-file-upload-button,
button {
    /* The color is similar to the border of OSX 10.12 buttons. */
    border-color: #d8d8d8 #d1d1d1 #bababa;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    /* Fixed padding provided by ThemeMac::ControlPadding() - 1px for broder */
    padding: 1px 7px 2px;
}

...and undoing the border reset.

The issue is some of these selectors have a higher specificity than a single class would, meaning for things like <input type="button">, our rounded utilities don't have any effect.

It turns out Chrome has now reverted this change:

https://bugs.chromium.org/p/chromium/issues/detail?id=752450#c13

...so it will stop being a problem in Chrome 63.

As such, we've opted to not attempt to "fix" this at all, because even though we could reset it for single selectors like button, we can't target input[type="button"] without breaking our own utilities.

Instead, it's recommended that users explicitly add rounded-none to buttons that should have square corners until Chrome 62 is no longer in widespread usage.

We may revisit "fixing" this in another patch release if we can think of an easy fix that doesn't introduce specificity issues, but reverting it for now so we can tag 0.2.1 and get our rounded utilities working again on <input type="{button|reset|submit}"> elements.

@adamwathan
Copy link
Member Author

Actually it looks like this isn't too tricky to fix, just need to target the following selectors:

button,
[type="button"],
[type="reset"],
[type="submit"] {
  border-radius: 0;
}

Let's give this a shot for 0.2.1 and if there's still issues people are running into, we can take the nuclear option.

@adamwathan adamwathan merged commit ae94ac9 into master Nov 18, 2017
@adamwathan adamwathan deleted the revert-button-reset branch November 18, 2017 15:50
DCzajkowski pushed a commit to DCzajkowski/tailwindcss that referenced this pull request Jul 23, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Border-radius preflight is always aplied
1 participant