TextField with outlined variant lose round corner in IE11

[ShawTim]

TextField with outlined variant suppose to have round corners and is working well in other browser like Firefox/Chrome. But in IE11, it lose round corners.

You can check it on https://next.material-ui.com/demos/text-fields/ (sadly, https://material-ui.com/demos/text-fields/ is not accessible by IE11).

Expected Behavior 🤔

This is what i see in Firefox, with beautiful round corners:

Current Behavior 😯

This is what i see in IE11, no round corners:

Steps to Reproduce 🕹

1. go to https://next.material-ui.com/demos/text-fields/
2. compare the Outlined layout in Firefox/Chrome and IE11

Your Environment 🌎

Tech	Version
Material-UI	v3-9-0, v4-0-0
React
Browser	IE11
TypeScript
etc.

[eps1lon]

This is related to border-radius in IE11. Apparently rendering the page in compatbility view should work but that causes other styles to break. At least our docs experience weird jitter.

I don't think we can do much about it without using a pure JS polyfill for border-radius

[oliviertassinari]

I have noticed this problem when introducing the outlined variant. I don't think that we should solve it.

[eps1lon]

I have noticed this problem when introducing the outlined variant. I don't think that we should solve it.

What other browsers have an issue with border-radius?

[ShawTim]

but i think it's better to be consistent.
if the styles are not consistent across browser, at least it needs to be consistent in IE11.

if it supports in IE11 - then all TextField should have round corners
if it's not supporting in IE11 - then all TextField should not have round corners.

as you can see in the screenshot the "Bare" TextField does already have round corners but not others.

[oliviertassinari]

What other browsers have an issue with border-radius?

@eps1lon I believe it's a IE 11 only issue.

@ShawTim We do our best effort for IE 11. But it can't be at the expense of everybody else. IE 11 market share should soon drop significantly in the next couple of months. I believe that IE 11 has still an important market share because the users can't upgrade to Microsoft Edge. Edge has taken a strong architectural choice that prevented it to be compatible with the older version of Windows. As the Edge team is moving to a Chromium core, this architectural limitation is going away. We are tracking it in #14420.

I was chatting with somebody close to the Chrome team. It's how I have heard about this possible trend. The future will tell us.

[oliviertassinari]

The provide more context. The first version of the Outlined TextField was using SVG elements. The implementation was later simplified to use a fieldset at the expense of IE 11 border radius. If you are aware of a simpler implementation that can be simple to override and has a limited bundle size impact, we would be happy to solve the problem. Until then, I'm closing.

[synedra-mpe]

Perhaps this could work: https://www.456bereastreet.com/archive/201302/fieldset_legend_border-radius_and_box-shadow/

[oliviertassinari]

@synedra-mpe I fear our support intent for IE 11 isn't meant to be as good as for the other browsers. We have been cutting corners. It's also an incentive for users to end-upgrade their browsers/OS, they will benefit from a better UX.

[synedra-mpe]

I would agree, if were not talking about the cardinal and most important ui element of material ui here, the Text filed. Wouldnt be concerned, if some less relevant feature, like a datepicker would not render 100% accurat in ie11.

https://material-ui.com/getting-started/supported-platforms/#browser states,

It also supports Internet Explorer 11.

It would make sense to rewrite this paragraph and point to what is communicated in #15389 (comment).

[oliviertassinari]

It's a best effort, we assume that our users would want to optimize for >80% of their end-users, not optimize for a minority, as IE 11 is increasingly becoming. For context #14420.

[eps1lon]

It's not like the textfield isn't working. It's only missing the border-radius which is absent from IE11 anyway.

[gsabanov]

Setting legend to display:inline-block brings back the rounded borders in IE 11, but to get the "notch" to work more work is needed.