[Dialog] - Blurry dialogs in chrome

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

[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.