Components: (Bug) .mat-form-field-underline not rendering in Webkit browsers

[vincecampanale]

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 to 1.1px !important using ::ng-deep doesn't fix it permanently. Something that may help is that when I use that 1.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!

[willshowell]

Can corroborate from your plunker at 80% and 67%

[vincecampanale]

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 rgb(0,0,0,0.47) to color the line, maybe try a light grey color with no alpha value? I'd be happy to fork and make a PR on my own time if that's something you all will accept.

[mmalerba]

Played around with it and adding transform: perspective(1px) seems to fix in chrome ¯\_(ツ)_\/¯

[vincecampanale]

Interesting fix -- thanks @mmalerba!

[menuka-s]

I think the .mat-select-underline class is affected too. Adding that line from @mmalerba will fix that too.

[datariomj]

I think this fix needs to be added on pre-built themes css/scss as well.

[mohanskumar]

Issue is still there in the 5X version

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}