Material-ui: [ButtonBase] border-radius Chrome 63

[albinekb]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

This is a really minor issue. But I think it should be fixed to add that final touch 😏 Just tell me if you want this to be corrected and I'll send a PR this weekend. Thanks for making this lib! ❤️

Expected Behavior

<Tab> button should not have border radius

Current Behavior

Steps to Reproduce (for bugs)

Only reproducible in chrome > 63 (canary atm)
Use the example at https://material-ui-1dab0.firebaseapp.com/demos/tabs/#basic-tabs

[oliviertassinari]

Sorry, but I can't reproduce the issue. What browser are you using?

[albinekb]

Chrome: Version 63.0.3215.0 (Official Build) canary (64-bit)
Material-ui: 1.0.0-beta.9

It is the "ripple" that has the border-radius "bug":

Any more information you need? @oliviertassinari

[oliviertassinari]

Could it be a chrome canary regression?

[albinekb]

Seems to be the case! @oliviertassinari I cannot reproduce in:
Version 60.0.3112.113 (Official Build) (64-bit)
Version 61.0.3163.91 (Official Build) (64-bit)

Would you like me to investigate what's causing this?

[oliviertassinari]

@albinekb It's not the first time we catch a browser regression, see #7652. It would be good to go down the rabbit whole yes! :)

[albinekb]

Good to fix it before chrome 63 hits stable. I'll have a look this weekend and see what I can come up with 👍

[oliviertassinari]

@albinekb Did you found more information about the issue this weekend?

[oliviertassinari]

I'm closing the issue as I don't think this is something actionable on our end. Will wait to see how things evolve.

[oliviertassinari]

@albinekb Thanks for raising this point :)

[albinekb]

Yeah I couldn't find out what was causing this @oliviertassinari, but closing it seems weird, it will most likely land in chrome beta next, and if it's there too it will come to stable...

[leMaik]

Couldn't this be "fixed" by manually setting the borderRadius of the tabs to 0?

[oliviertassinari]

I had a closer look at the issue. It's simply Chrome how is introducing a new user-agent style:

Applying @leMaik's suggestion on the ButtonBase.js styles solve the issue. Does someone want to give it a shot?

[gokulchandra]

Fixed in PR #8507

[jgoux]

Hello, sorry to bump this issue but resetting ButtonBase's border-radius is conflicting with Avatar (no longer rounded when doing <Avatar component={ButtonBase} />)

Shouldn't the parent component (in this case Avatar) dictate the styles and ButtonBase be only about semantic + ripple effect?