Closed Bug 1552899 Opened 5 years ago Closed 5 years ago

Latest CSS changes on BMO make text too small and there is not enough contrast any more

Categories

(bugzilla.mozilla.org :: General, defect)

Product:
bugzilla.mozilla.org
Component:
General
Version:
Production
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 1552885

People

(Reporter: jorgk-bmo, Unassigned)

Details

(Keywords: access, regression)

Attachments

(2 files)

2019-05-20 19_09_03-1552899 - Latest CSS changes on BMO make text too small and there is not enough .png
13.13 KB, image/png
Details
screenshot
105.35 KB, image/png
Details

Can you please revert some of the CSS changes that became active today.

The text is now medium grey on light grey and too small.

I spend all day messing with bugs and I have trouble reading the comments now.

The comment text is dark grey on white background. Also the font size is bigger than before. Are you perhaps using a user style or something?

or maybe legacy non-modal UI?

The non-comment text is actually 13px, which is unchanged.

What's wrong with black text? There is non-comment text, grey on grey. From my prefs: Use modal user interface: On. No user style, well, not that I'm aware of.

I'm on FF 60 ESR on Windows.

(In reply to Kohei Yoshino [:kohei] (Bugzilla UX) (FxSiteCompat) from comment #4)

The non-comment text is actually 13px, which is unchanged.

Check my picture, it's most certainly now 13px.

OK, I might be wrong with the 9px, the "P" in "Version: Production" is 9px high, measured on the screen with a magnifier. Looks like letters "i" and "h" are taller. The "T" in "This bug is currently not tracked" is 9px high, the "h" is 10 px high. Maybe it's also an effect the changed font.

Attached image screenshot —

This is what I see. Looks like the contrast is your monitor’s issue?

I can confirm the problems.

  1. Everything got less contrast: various shades of grey (background/buttons/headings/comments). If comments are white, it is not clear.
  2. Too much padding everywhere, comments, textarea, buttons. It is seens that now the buttons do not align vertically with the labels (they do not fit on a line), e.g. see "Assignee: Unassigned [Take]"
  3. rounded buttons, but that is a matter of taste. But those buttons do not look like buttons, they are just flat slabs of color, they look more like toggles (depressed) or something (if there would be more of them alongside, some of them pressed some not).

Actually the comment text did really enlarge for me.

All this on Chrome, Linux.

(In reply to Kohei Yoshino [:kohei] (Bugzilla UX) (FxSiteCompat) from comment #8)

Created attachment 9066098 [details]
screenshot
This is what I see. Looks like the contrast is your monitor’s issue?

I see this same. And yes, this is the low contrast we are talking about.

(In reply to Kohei Yoshino [:kohei] (Bugzilla UX) (FxSiteCompat) from comment #8)

This is what I see. Looks like the contrast is your monitor’s issue?

It worked fine this morning, in fact, a few hours ago. The "W" in "Whiteboard" on your screenshot is also 9px high, at least when I view the details.

Sadly I don't have a screenshot of the old BMO to compare.

(In reply to :aceman from comment #10)

(In reply to Kohei Yoshino [:kohei] (Bugzilla UX) (FxSiteCompat) from comment #8)

Created attachment 9066098 [details]
screenshot
This is what I see. Looks like the contrast is your monitor’s issue?

I see this same. And yes, this is the low contrast we are talking about.

Forgot to say: the actual text looks darker than this screenshot. It's #3c3d3e on #fafbfc so I don’t see any contrast issue.

(In reply to Jorg K (GMT+2) from comment #11)

It worked fine this morning, in fact, a few hours ago. The "W" in "Whiteboard" on your screenshot is also 9px high, at least when I view the details.

As I said it’s 13px and the same as before. Maybe it looks smaller now because the comment font size is larger than before.

Re: the contrast, I’ll adjust the colour a bit. Still, I doubt a monitor or rendering issue. When I pick a text colour from Jorg’s screenshot, it will be #646566 which is totally different from #3c3d3e specified with CSS.

Very hard to pinpoint what's changed any why everything looks smaller. Were it the repository for the CSS so I can try the old version locally?

I'm using glasses and Bugzilla in 130% zoomed mode with disabled modal user interface (I prefer old one),
and for me this new text font looks kinda blurry and causes me eye strain.
Looks like without sub-pixel anti-aliasing, but only gray-scale anti-aliasing (but it's not).

Any chances to reconsidering this change, please?
And use black text font color, instead of grey shades.

Keywords: access, regression
OS: Unspecified → All
Hardware: Unspecified → All

I’ll merge this to Bug 1552885 and solve the issues.

Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → DUPLICATE

Can you please still post the details of where to get the old version, see comment #14.

Flags: needinfo?(kohei.yoshino)

@kohei, previously we embedded the browser OS into the body.class because the default font on windows was too small. This is probably that.

(In reply to Dylan Hardison [:dylan] (he/him) from comment #18)

@kohei, previously we embedded the browser OS into the body.class because the default font on windows was too small. This is probably that.

I thought that’s for the monospace font.

Some monospace posts are tiny, check bug 1546364 comment #2.

Setting severity to normal.

Critical is intended for bugs which involve crashes, loss of data, and severe memory leaks.

This is an accessibility issue reported by single user, not a widespread crash.

Severity: critical → normal

Somehow the link to the explanation of the Severity has disappeared. Surely in the Bugzilla component, "critical" is not related to crashes. In a few hours we have collected complaints of five users, here and in bug 1552885. Not being able to read what's on the screen well any more is actually quite critical.

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: