dialog: some screen widths show vertical white line

[VitalickS]

Actual Behavior:

• What is the issue? Any md-dialog with toolbars in Chrome has right vertical white line for some screen widths. (for ex. 1103px, 1104px)`
• What is the expected behavior? No white line please.

CodePen (or steps to reproduce the issue):

• CodePen Demo which shows your issue: CodePen Demo.
• Resize chrome browser for some widths (for ex. 1103px, 1104px)
• See vertical white line (1px width) that appears
• Details: I tested in other browsers, only chrome has this issue

Angular Versions: *

• Angular Version: 1.5.9
• Angular Material Version: 1.1.0

Additional Information:

• Browser Type: Chrome
• Browser Version: Latest
• OS: Windows 10

---

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[Splaktar]

I updated the demo to AngularJS Material 1.1.21 and I still see the same behavior. I can't reproduce it using the exact screen pixel width specified here, but resizing the browser repeatedly I can find a certain width where there does appear to be a 1px white line within the dialog's md-toolbar.

After some minor debugging, it appears to be related to the interaction between the following two CSS properties:

material/src/components/dialog/dialog.scss

Line 38 in e96293a

overflow: auto; // stop content from leaking out of dialog parent and fix IE

This same behavior occurs with overflow: hidden.

material/src/components/dialog/dialog-theme.scss

Lines 1 to 4 in e898d22

	$dialog-border-radius: 4px !default;
	md-dialog.md-THEME_NAME-theme {
	border-radius: $dialog-border-radius;

This seems like a Chrome bug, but I wasn't quite able to find an exact match via this query.