Closed Bug 986087 Opened 7 years ago Closed 2 years ago

Lightweight theme translucent toolbar overlay makes buttons and text blurry

Categories

(Firefox :: Theme, defect)

29 Branch
All
macOS
defect
Not set
normal

Tracking

()

RESOLVED WORKSFORME

People

(Reporter: mozbugs, Unassigned)

References

Details

(Whiteboard: [Australis:P5])

Attachments

(6 files)

Since Firefox 29a1 (Australis) lightweight themes with some colors e.g. sandcolor, yellow or green show a mask which makes the browser chrome and buttons and text blurry and hard to see and read.

The problem only exists on Mac OS, the same themes don't have this problem on Windows 7.

See attached screenshots, which show the problem.
Is this an anti-aliasing issue you are seeing or what? Could you post a before screenshot so it's easier to see what is more blurry. I'm not really seeing the problem at the moment as it seems subtle.

The summary of the bug would be a wontfix since it's the design. Re-summarizing to cover the blurriness.
Hardware: x86 → All
Summary: Lightweight themes show opaque mask on part of browser chrome → Lightweight theme translucent toolbar overlay makes buttons and text blurry
Whiteboard: [Australis:P5]
Attached image default-theme
Attached image Firefox-B-theme
Maybe what I'm seeing is a contrast problem, some background colors create low contrast which makes the text or buttons hard to read / see. 

Also see the Iris Leaf theme on Windows 7 which apparently has no translucent toolbar and has a good contrast between buttons and the background
It's not a contrast problem.

Mac Australis is being overlaid with a transparent "noise" image and also set with a transparent background of 45%.

This basically makes all Personas/background looks bad. The contrast between having the noise and not having the noise is quite striking.

I've attached an image that shows how bad it is with dark themes.

The code is here:

http://mxr.mozilla.org/mozilla-central/source/browser/themes/osx/browser.css#121

#navigator-toolbox > toolbar:not(#TabsToolbar):-moz-lwtheme {
  background-color: @toolbarColorLWT@;
  background-image: url(chrome://browser/skin/Toolbar-background-noise.png);
}

toolbarColorLWT is defined here:

http://mxr.mozilla.org/mozilla-central/source/browser/themes/osx/shared.inc#7

%define toolbarColorLWT rgba(253,253,253,0.45)
Irrelevant with photon.
Status: UNCONFIRMED → RESOLVED
Closed: 2 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.