-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
TextField with outlined variant lose round corner in IE11 #15389
Comments
This is related to I don't think we can do much about it without using a pure JS polyfill for |
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? |
but i think it's better to be consistent. if it supports in IE11 - then all TextField should have round corners as you can see in the screenshot the "Bare" TextField does already have round corners but not others. |
@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. |
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. |
Perhaps this could work: https://www.456bereastreet.com/archive/201302/fieldset_legend_border-radius_and_box-shadow/ |
@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. |
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 would make sense to rewrite this paragraph and point to what is communicated in #15389 (comment). |
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. |
It's not like the textfield isn't working. It's only missing the border-radius which is absent from IE11 anyway. |
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. |
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 🕹
Your Environment 🌎
The text was updated successfully, but these errors were encountered: