bug(progress-bar): Display issue on Firefox

Bug, feature request, or proposal:

Bug

What is the expected behavior?

To be a correctly working and displaying Material Design progressbar.

What is the current behavior?

It's not displayed correctly.

What are the steps to reproduce?

Just open the progressbar from the docs with Firefox.

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

Angular Material 2.0.0-beta.12
At least Firefox 56

This is a really strange issue. When hover over any element with the inspector, the problem disappears. As soon as I exit inspector mode it reappears.

I'm not sure anymore if this is really an Angular MD issue rather than a Firefox issue.

[josephperrott]

I am fairly certain its a firefox regression, as nothing changed in the progress-bar code and this issue can be seen occurring a few version back as well.

However, I was not able to reproduce it when I extracted the dom structure and css out and ran it separately. It will definitely require more investigating.

[shalugin]

Firefox team changed their css engine recently.

[shalugin]

I've triggred a bug in BugZilla - https://bugzilla.mozilla.org/show_bug.cgi?id=1406623

[josephperrott]

As an update, it looks like the regression will hopefully be addressed in FF 58