Stepper: misplaced icon on optional step in IE11

[alexciesielski]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Display the "Optional label" and the step icon correctly

What is the current behavior?

Optional label is not visible, step icon is misplaced

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

Angular CLI: 1.6.5
Node: 7.10.1
OS: win32 x64
Angular: 5.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.1.0
@angular/cli: 1.6.5
@angular/material: 5.1.0
@angular-devkit/build-optimizer: 0.0.41
@angular-devkit/core: 0.0.28
@angular-devkit/schematics: 0.0.51
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.5
@schematics/angular: 0.1.16
typescript: 2.4.2
webpack: 3.10.0

Is there anything else we should know?

In this example, step 3 is optional. It displays correctly in Chrome and Edge, but not in IE11.

[crisbeto]

I didn't manage quite to reproduce it locally, but I got something similar if I add box-sizing: border-box to everything. Do you happen to have this somewhere in your CSS?

*, *:after, *:before {
  box-sizing: border-box;
}

[alexciesielski]

You're right, I import Bootstrap 4 reboot.scss.
As a fix I added a global style rule

.mat-step {
   box-sizing: content-box;
}

and now it displays correctly on IE11 and Chrome.

Thanks

[crisbeto]

Thanks, good to know. Let's keep the issue open since this is a common enough use case that we should handle it.

[alexciesielski]

Actually, after having a closer look the optional header is still a bit off in IE11.

Adding box-sizing: content-box; to either .mat-step or .mat-step-header produces a better result, however it's still not 100% correct.

Removing align-items: center fixes the icon placement on IE11 (but messes up the labels on Chrome), but the label is still misplaced to the bottom.

[angular-automatic-lock-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.}