[Dialog] - Blurry dialogs in chrome

[mklenk]

Description

We're using the Dialog component a lot for forms, settings, etc. But most of them are a bit blurry. It depends on the size, contents and if there's a scrollbar visible because of overflow. But it's blurry even if try to break it down to just a title and a text (see screenshots/codepen)

This seems to be related to the positioning (http://stackoverflow.com/questions/31109299/css-transform-translate-50-50-makes-texts-blurry) but I couldn't find a solution that works without zooming and then downscaling the container.

Images/Screenshots

Blurry:

---

"Fixed" by forcing overflow: scoll:

Link to a gist or code sample where the issue can be reproduced

https://codepen.io/anon/pen/WjQpma

Version

• React: 15.5.4
• React-MD: 1.0.11
• Browser Chrome: 57.0.2987.133

[mlaursen]

Is this a windows only bug? I tried testing it on Mac, but the Chrome, Safari, and Firefox dialogs all appeared the same to me. I can try testing it later on windows as well.

I thought I had fixed this awhile back by using translate3d instead of translate, but I guess it might still be off.

[stickfigure]

We experience this on OSX, latest Chrome, react-md 1.0.11. Here's a screenshot:

http://take.ms/U6zeX

[mlaursen]

Oof. Darn. I'll try and debug this a bit more. I have noticed if I changed the -webkit-font-smoothing: antialiased; to -webkit-font-smoothing: subpixel-antialiased; on the body it worked, but I've read a lot of articles saying you should stop messing with font-smoothing

[fellmann]

This can be fixed by using

.md-dialog.md-dialog--centered {
  transform: translate(-50%, -50%);
}

instead of transform: translate3d(-50%, -50%, 0).

Is this a valid fix to include in all dialogs?

The problem is that for dialogs with height not divisable by 2, the top: 50% is calculated as .5 and subpixel rendering kicks in.

[fellmann]

Sorry - not fixed, not it toggles between blurry and not blurry when you click or select text in the dialog.

[c06e]

I get this issue as well. Any ideas when this will be fixed?

[solvemon]

I was struggling with this issue as well.

Replacing the top/left + transform with flex alignments worked for me and removed all the blurriness:
(My fix with SCSS)

#my-app {

  .md-dialog-container {
    display: flex;
    justify-content: center;
    align-items: center;
    .md-dialog--centered {
      transform: none;
      left: unset;
      top: unset;
    }
  }
}

[mlaursen]

This has now been added as a new opt-in feature until the next major release where it will be enabled by default.

Setting $md-dialog-use-flex-positioning: true will now use flex-based centered instead of the old left/top + translate3d hack.