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

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!

[mmalerba]

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

[willshowell]

Can corroborate from your plunker at 80% and 67%