Outline form field visual bug in 6.2

Bug, feature request, or proposal:

mat-form-field-outline-gap and mat-form-field-outline-start classes are not styling right

What is the expected behavior?

Same behaviour as material 6.1

What is the current behavior?

When you move between routes and load a component with some form fields with values, the outline gap doenst calculate the width, so label is bad styled. When you click anywhere, the width is recalculated fine.

What are the steps to reproduce?

GIF with the problem:

What is the use-case or motivation for changing an existing behavior?

Prior to 6.2 everything worked fine

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular Material 6.2

Is there anything else we should know?

Angular Material 6.1 didnt have this issue

The problem seems to be related with the width applied to mat-form-field-outline-gap and mat-form-field-outline-start classes, when the bug happens, the width is set to 0, like:

<div class="mat-form-field-outline-start" style="width: 0px;">...</div>

And then if you click anywhere: <div class="mat-form-field-outline-start" style="width: 5.48608px;">...</div>

[shristi-cashify]

this issue is still existing

[mmalerba]

I think #12555 should fix this