-
Notifications
You must be signed in to change notification settings - Fork 6.7k
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
(Bug) .mat-form-field-underline not rendering in Webkit browsers #7494
Comments
I solved this problem with some inconsistently rendered lines of my own by removing the opacity. The lines were svg lines, so this fix may not apply to your problem, but might be a place to start. Instead of using |
Played around with it and adding |
Interesting fix -- thanks @mmalerba! |
I think the .mat-select-underline class is affected too. Adding that line from @mmalerba will fix that too. |
I think this fix needs to be added on pre-built themes css/scss as well. |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
First off -- thanks for the all the great code!
Bug, feature request, or proposal:
The line underneath the input in a form field (any type of form field) with the class
.mat-form-field-underline
is sometimes absent from Webkit browsers. It renders as expected at any zoom level and any size screen or device on Firefox, but with Chrome and Safari it's completely random. For example, I have a list in my application using the plain ol' input and datepicker elements. Some of them have underlines, some of them don't. It's different which ones are working and which aren't on any given render.I thought it may have something to do with the height being changed to
0.99px
in Chrome, but even setting the height to1.1px !important
using::ng-deep
doesn't fix it permanently. Something that may help is that when I use that1.1px
height trick, some lines look extra thick, while others just look normal. I would think maybe those normal looking ones are the ones that would be absent without explicitly setting the height, but then again, sometimes they disappear altogether.What is the expected behavior?
The underlines would show up all the time, no matter what.
What is the current behavior?
Unpredictable rendering for underlines.
What are the steps to reproduce?
https://plnkr.co/edit/kmjxWTwC6sSrkSnDVoGQ?p=preview
Check out this Plunker on Chrome and zoom in and out, resize your window, refresh the page a bunch of times, eventually the underline will disappear. For me, 80% is a pretty reliable way to make it disappear, but I'm sure it's different everywhere (different screens, devices, etc.). I wish I could provide more info, but it is truly random.
What is the use-case or motivation for changing an existing behavior?
Using the input. : /
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Webkit browsers.
Is there anything else we should know?
Again, great library. Thanks!
The text was updated successfully, but these errors were encountered: