Material: mdDialog + mdToolbar: Chrome (minor) subpixel issue with toolbar inside a dialog

[migingreen]

The Toolbar inside the dialog has sometimes a gap on the right side on lower screen widths (<1000px) in Chrome (see tab-dialog in demo and picture).
Dialog demo

Tested with Chrome 49 and 50.

I'm not sure if this is an issue on your side, otherwise I'm sorry for the noise.

[ThomasBurleson]

Minor CSS issue. Will not fix.

[bsandrow]

+1

[bsandrow]

There is a (hacky) fix for this:

md-dialog {
  overflow: visible;
}

md-dialog md-toolbar {
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}

I have tested this (via Chrome console) in the posted CodePen.

Things to note:

• This still needs tweaking for the fullscreen option, as the md-toolbar will still have its border-radius.
• This is probably a subpixel rounding issue because resizing the browser on the x-axis will cause the issue to pop in and out.
• The border radius needs to match the border radius of the md-dialog element.
• I have no idea what the possible fallout of overflow: visible could be beyond this, though it seems to me that, by design, the md-dialog-content element is the only element that should be doing any scrolling (with the md-toolbar and md-dialog-actions being fixed to the top and the bottom) so the fallout might be non-existent.
• This may be related to this.

[bsandrow]

I've create a CodePen with my patch. It fixes it at larger screen sizes, but when fullscreen is false (as it is on the "Tab Dialog" example), the issue reappears when the dialog gets smaller than the -sm breakpoint.

[jakubweber]

@bsandrow thanks!

It is annoying bug with easy fix.

[migingreen]

@bsandrow Thanks for sharing your solution!

[bsandrow]

It's not a full solution, but it should probably be looked at, fixed, and rolled into the angular-material codebase. Framework users shouldn't have to search the web, find this issue and work around it themselves.

[bsandrow]

I've updated my fix:

md-dialog,
md-dialog form {
  overflow: visible;
}

md-dialog md-toolbar {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

@media (max-width: 959px) {
  md-dialog.md-dialog-fullscreen md-toolbar {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
  }
}

And there is an associated CodePen that I've forked from the previous one. You'll notice the following changes:

• The "Tab Dialog" not longer displays this issue. This is because that demo looks something like this:

html <md-dialog> <form> <md-toolbar>

If the <form> element doesn't also have overflow: visible like the <md-dialog> element, the visual bug crops up again. If you plan to nest other elements between the <md-dialog> and the <md-toolbar> you will likely have to fix it yourself. (My suggestion would be that if you want to wrap the <md-dialog> in a <form> you could leave the <md-toolbar> out of it.)

• I've removed the border-radius from the toolbar on smaller screens when the fullscreen option (which uses the .md-dialog-fullscreen class) is enabled.

[bsandrow]

I played with this a bit further, and it looks like this is the culprit:

md-dialog._md-transition-in {
    opacity: 1;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
}

Disabling both transforms (at least in Chrome) makes the issue disappear. While a translate(0, 0) and scale(1) _should_ be a no-op, transform allows precise subpixel positioning, which is probably what is causing the issue here (the <md-toolbar> is _not_ receiving this subpixel positioning).