dialog: text in the dialog stays bolded permanently after the dialog animation ends on macOS

[rvarbanov]

Actual Behavior:

• What is the issue? * My app collects data that you can edit at a later time. I use mdDialog to show a form with all the current data that the user can update. The issue I am having right now is that when you open the dialog, all the pre-existing data is "bold." If you are to focus on the input fields with existing data, they will instantly change to "normal." I have seen that issue only in Chrome. When I load the app in FireFox, the text in the input fields are "normal."
• What is the expected behavior? I am expecting the text in the inputs not to be bold.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: For whatever reason, it is not showing up in CodePen. However, you can see the issue on the current Angular Material website. If you know why CodePen would not work for me, please let me know. I spend a few hours trying to reproduce the issue in it to no avail.

• Details:Go to the Angular Material dialog demo webpage and click on the "PROMPT DIALOG" button. That will open a dialog with one input field that is that has existing data of "Buddy." When the dialog opens, for a split second you can see that the text "Buddy" is in "bold." After the field gets autofocused the text turns into "normal."

Angular Versions: *

• Angular Version: 1.5.9
• Angular Material Version: 1.1.1

Additional Information:

• Browser Type: * Chrome
• Browser Version: * 54.0.2840.98 (64-bit)
• OS: * OS X El Capitan 10.11.6 (15G1108)
• Stack Traces: n/a

Maybe a screenshot will help:

EDIT: Included a gif to better demo the issue

EDIT 2: Also, if I go into Developer Tools and disable a style it all the test in the dialog will update to normal. E.g., if I disable to background-color of a button all the text of the dialog will visually change to normal.

[bradrich]

Hello @rvarbanov! The input that you are referring to in the prompt dialog is using md-autofocus. Removing this causes the input to remain unfocused until you interact with it. Having said all of that, I removed this attribute and the input was not bold.

So, time for some quick questions:

• Do you have any conflicting CSS? Look through Inspect Element to see if you have a font-weight: bold that is sneaking in there.
• I am assuming that you are using a custom template for your dialog. Do you have an internal element of that template using the ng-cloak attribute? DO NOT put the ng-cloak attribute on the main md-dialog element. It messes with the dialog animation.

[rvarbanov]

Hi @bradrich, quick question, did you follow the steps to reproduce? Did you see the issue on the AM demo page?

• No, the input element has its font-weight set to normal. I even tried input { font-weight: normal !important; } and I could still not get the input fields to now bold the text.
• I am not using ng-cloak on my app.

[bradrich]

I was not able to reproduce the issue.

I would recommend using ng-cloak within your application. The necessary CSS is already supported through Angular Material, so all you have to do is to add the ng-cloak attribute to a HTML element and the directive will handle the rest. As I am not able to reproduce the issue, I am not sure if this will fix it, but it is definitely a tool to use.

[rvarbanov]

I tried using ng-cloak on the HTML tag but had no effect on the issue I am experiencing.

Today I noticed the input labels and placeholders are also bolded, and when I click into the input (focus the input) they go back to normal.

Here is a demo:

Edit: Also, if I go into Developer Tools and disable a style it all the test in the dialog will update to normal. E.g., if I disable to background-color of a button all the text of the dialog will visually change to normal.

[svencowart]

I am experiencing the same issue on Chrome. This is not an appropriate fix because it removes the nice opening and closing animations of the md-dialog, but I could prevent the fonts from being bold by setting transition to none on the md-dialog element:

md-dialog {
    transition: none !important;
}

I could be wrong about this but after some research I am lead to believe it has to do with Chrome's affect on anti-aliasing triggered by transition effects.

[svencowart]

@bradrich I am using Chrome 55.0.2883.95 and I can see this problem on the demo page (https://material.angularjs.org/latest/demo/dialog). Just inspect the md-dialog element and uncheck the transition property and you can see all the text within a dialog return to the appropriate weight.

Using ng-cloak on the md-dialog component works, but also kills the opening animation which is obviously not the solution.

[meetbryce]

Found an alternative hack for this.

If you show a spinner while the dialog is opening, then only reveal the real content after the transition has finished you don't see the bug.

I implemented this by adding an artificial 400ms delay to mdDialogs being opened without an async request. I used $timeout(() => { $ctrl.state.loading = false; }, 400);

[Splaktar]

We use the following related, non-standard style for macOS:

html, body {
  -webkit-font-smoothing: antialiased;
}

However, I tried all of the possible values and they did not improve the situation here.

I can reproduce (CodePen) the fact that the text of the whole dialog (not just inputs) first appears as slightly bolded before transitioning to normal (its final state).

I cannot reproduce the case where the text in a dialog never reaches the final state and stays permanently bolded. If this is still reproducible, please provide an updated set of reproduction steps.