1486740 - [MAC] Text blurry after changing to dark theme

Status: RESOLVED DUPLICATE of bug 1482534

(Firefox :: New Tab Page, defect, P3)

Description

[Cristian Fogel [:cfogel]]

[Affected versions]:
- 63.0b1_DevED, 62.0b19, 63.0a1 (2018-08-23),61.0.2, 

[Affected platforms]:
- macOS 10.13, macOS 10.12

[Steps to reproduce]:
0. Firefox is set to Light/Default/Any other theme.
 
1. Launch Firefox;
2. Open the newtab page;
3. Click on the Hamburger menu, click on the Customize option;
4. Click on the Theme picker, choose the Dark theme;
5. Click on the Done button;
6. Press F12 on the keyboard(opening devTools);
7. Click on the Inspector tab for the devTools.

[Expected result]:
- page content is properly rendered;

[Actual result]:
- changing to dark theme text on new-tab is blurry;
- opening the DevTools-inspector clears the blur effect.

[Regression range]:
- while checking for regression I considered as issue the fact that the styling changes after toggling the devTools inspector on; Current nightly has the text crisp/thin/readable;

- mozregression result:
Last good revision: 1344ca26ef0aec57cb0177f7089287b263c7a52b
First bad revision: 9896401414cb3c7cb5f1118b307b0267212c8aad

Pushlog URL:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=1344ca26ef0aec57cb0177f7089287b263c7a52b&tochange=9896401414cb3c7cb5f1118b307b0267212c8aad

[Additional notes]:
- recording with the issue: http://g.recordit.co/XAl1OTAiNl.gif
- noticeable on text from topSites, Highlights as well, in some cases even the text from the topSites tiles was affected;

Comment 1

[Cristian Fogel [:cfogel]]

Attachment: devT_darkThemeTextBlur.gif

Attached the recording with the issue.

Comment 2

[Ed Lee :Mardak]

Might be related or the same as bug 1482534 ? -moz-osx-font-smoothing: grayscale

cfogel, does unchecking/disabling that style with devtools fix the blurriness?

The style shows up as

[lwt-newtab-brighttext] {
  -moz-osx-font-smoothing: grayscale; }

Comment 3

[Cristian Fogel [:cfogel]]

(In reply to Ed Lee :Mardak from comment #2)

> does unchecking/disabling that style with devtools fix the blurriness?


It doesn't seem to be it. 
 
Have tried with creating a separate html file and applying just that property to it, but it's not having the same effect.
I even tried copying the newtab page content to a local file but the text was properly displayed.

Could it by a combination of bug(1482534) and something else causing it?

Comment 4

[Dão Gottwald [:dao]]

Why are you using -moz-osx-font-smoothing: grayscale in the first place?

Comment 5

[Ed Lee :Mardak]

It was added in https://github.com/mozilla/activity-stream/pull/4089 to make text sharper:

https://user-images.githubusercontent.com/1455535/38701664-7a625340-3e6c-11e8-9402-8e53527ce5b0.png

Comment 7

[Liz Henry (:lizzard) (relman/hg->git project)]

Too late to fix in 63. We could still take a patch for 65 and potentially for 64.

Comment 8

[Dão Gottwald [:dao]]

(In reply to Ed Lee :Mardak from comment #5)
> It was added in https://github.com/mozilla/activity-stream/pull/4089 to make
> text sharper:
> 
> https://user-images.githubusercontent.com/1455535/38701664-7a625340-3e6c-
> 11e8-9402-8e53527ce5b0.png

Clearly this isn't always working as intended. Can we just revert this for now?

Comment 9

[Ed Lee :Mardak]

Aaron, is it better to just go back to the "before" https://user-images.githubusercontent.com/1455535/38701664-7a625340-3e6c-11e8-9402-8e53527ce5b0.png

Comment 10

[Aaron Benson]

No, the before is not the ideal. The after looks more correct (less blurry).