Visual noise in 13.5a4 letterboxing

assigned to @ma1

added 13.5 stable All Platforms Desktop UX labels

removed UX label

added Bug UX labels

removed UX label

It's a very hairy problem, due to the round borders. What you see is the light background of the <body> element content bleeding out from the status bar.

A similar effect, with the same root cause, can be seen even without the "help" of the status panel by just looking at Tor's own home page, where the <body> element has a white color but is covered by some purple content: on the top edges, if rounded, you can se some whiteish pixels bleeding out:

Even applying an inner shadow to the <browser> element, which would "cure" the symptoms if that was a normal DOM, doesn't appear to work at all in my tests, probably because the rendering is done in a different process and this edge case is not handled at composition time (no shadow is rendered).

The only work-around I could find is overlaying a new transparent box over the <browser> element, which we may call "letterboxing-border-overlay", and applying it a very subtle (0.1px) combo of dark outside shadow + outline + inner shadow, which does mask the bleeding:

The following screenshot demonstrates the specular problem for a light browser theme with a dark body.background color in content:

Here mitigated by a light shadow/outline:

@jag , @donuts , I understand this is a compromise which deviates significantly from your designs.

Is it acceptable? The alternative as far as I can tell would be going back to flat borders.

The only work-around I could find is overlaying a new transparent box over the <browser> element, which we may call "letterboxing-border-overlay", and applying it a very subtle (0.1px) combo of dark outside shadow + outline + inner shadow, which does mask the bleeding:

Is the border a flat color? I'm wondering if we can select specific colors that will help it blend into the shadow/background a little more.

Is the border a flat color?

Not exactly: the outline semitransparent (~66%) and the shadow is blurred, black on the dark themes and white on the light ones.

dark
{
	box-shadow: #000a 0px 0px .1px inset, #000a 0 0 .1px;
	outline: .1px solid #000a;
}

light
{
	box-shadow: #fffa 0px 0px .1px inset, #fffa 0 0 .1px;
        outline: .1px solid #fffa;
}

I can check what happens if I use the letterboxing background color (whatever it is - but not accounting for gradient -- or averaging them?).

These two screenshots reuse the letterboxing background color as it is. I've also slightly moved down the status bar (half a pixel) to remove a bit of residual jagging when it was displayed on a light theme:

mentioned in merge request !905 (merged)

marked this issue as related to tor-browser-build#41051 (closed)

marked this issue as related to tor-browser-build#41074 (closed)

@ma1

I was wondering if setting left: -1px and bottom: -1px on the <hbox> work instead of the overlay? Or is that too hacky and fragile?
Do you have a build available that I can test with?

I was wondering if setting left: -1px and bottom: -1px on the <hbox> work instead of the overlay? Or is that too hacky and fragile?

Already tried in an early testbuild and was called out as ugly (rightly so), because the misalignment sticks out more than this noise.

Do you have a build available that I can test with?

Current Tor Browser 13-5a4 should have the patch from !905 (merged), which "fixes" this. It will land in Mullvad Browser alpha 5.

Actually, I should have already closed this bug (doing it right now), sorry for the noise (pun intended).

Please open new issues if you find further problems in Tor Browser 13.5.a4.

I'd like to keep this issue open until we can see it in practice, please. I think I can still see the noise @ruihildt reported originally in the corners, but it's hard to tell from screenshots alone.

We may also be able to suggest colors that blend better by recreating the issue in Figma. Could you let me know what styles you ended up merging please (e.g. the same way you did here: #42387 (comment 2990574)), and we can experiment with those?

I'd like to keep this issue open until we can see it in practice, please

Just to be clear, Tor Browser 13.5a4 is not affected anymore since !905 (merged). Mullvad Browser 13.5a4 had already shipped when the patch landed, and will be fixed in 13.5a5.

If you want to compare Tor Browser instances with and without the bug, please look at these two testbuilds:

We may also be able to suggest colors that blend better by recreating the issue in Figma.

I doubt Figma will help here, because it's a concrete rendering problem (not a design one) dependent on the background color of the page, which we can't control, and on the rendering pipeline spanning across two processes.

Therefore I rather recommend using the Browser Toolbox developer tool to interactively prototype taking in account the actual rendering glitches.

Could you let me know what styles you ended up merging please (e.g. the same way you did here: #42387 (comment 2990574)), and we can experiment with those?

These are the base styles:

.browserDecorator {
  display: none;
  pointer-events: none;
  background: transparent;
  position: relative;
  z-index: 1;
}

.letterboxing {
  --letterboxing-border-radius: 8px;
  --letterboxing-border-top-radius: 0;
  --letterboxing-vertical-alignment: start;
  --letterboxing-shadow-color: rgba(12, 12, 13, 0.10);
  --letterboxing-bgcolor: var(--tabpanel-background-color);
  --letterboxing-gradient-color1: var(--letterboxing-bgcolor);
  --letterboxing-gradient-color2: color-mix(in srgb, var(--chrome-content-separator-color) 50%, var(--letterboxing-bgcolor));
  --letterboxing-border-color: var(--letterboxing-bgcolor);
}

.letterboxing.letterboxing-vcenter .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) {
  --letterboxing-border-top-radius: var(--letterboxing-border-radius);
  --letterboxing-vertical-alignment: center;
}

.letterboxing.letterboxing-gradient .browserContainer {
  background: linear-gradient(283deg, var(--letterboxing-gradient-color1) 0%, var(--letterboxing-gradient-color2) 100%), var(--letterboxing-bgcolor);
  box-shadow: rgba(0, 0, 0, 0.5) 0px -1px 2px;
}

:root:not([inDOMFullscreen]) .letterboxing .browserContainer:not(.responsive-mode)
  > .browserStack:not(.exclude-letterboxing)
  > .browserDecorator {
  display: initial;
  visibility: visible;
  border-radius: var(--letterboxing-border-radius);
  border-top-left-radius: var(--letterboxing-border-top-radius);
  border-top-right-radius: var(--letterboxing-border-top-radius);
  box-shadow: var(--letterboxing-border-color) 0px 0px .1px inset, var(--letterboxing-border-color) 0 0 .1px;
  border: .1px solid var(--letterboxing-border-color);
  outline: .1px solid var(--letterboxing-bgcolor);
  height: calc(var(--letterboxing-height) + 1px);
  top: -1px;
}

.letterboxing-vcenter .browserDecorator {
  height: auto !important;
  top: 0 !important;
}

/*
  Align status bar with content.
  TODO: switch to nested CSS selectors for conciseness when available (Firefox >= 117)
*/
.letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing)
  > #statuspanel:not([hidden]) {
  position: relative;
  place-self: end left;
  left: 0;
  right: 0;
  z-index: 2;
  --letterboxing-status-left-radius: var(--letterboxing-border-radius);
  --letterboxing-status-right-radius: 0;
}
.letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing)
  > #statuspanel:not([mirror]):-moz-locale-dir(rtl),
.letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing)
  > #statuspanel[mirror]:-moz-locale-dir(ltr) {
  left: 0;
  right: 0;
  --letterboxing-status-right-radius: var(--letterboxing-border-radius);
  --letterboxing-status-left-radius: 0;
  justify-self: right;
}

.letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing)
#statuspanel-label {
  border-radius: 0 0 var(--letterboxing-status-right-radius) var(--letterboxing-status-left-radius);
  margin: 0;
  border: 1px solid var(--letterboxing-border-color);
  max-width: calc(var(--letterboxing-width) * .5);
}

.letterboxing .browserContainer:not(.responsive-mode) > .browserStack:not(.exclude-letterboxing) > browser {
  box-shadow: 0px 4px 8px 0px var(--letterboxing-shadow-color);
  border-radius: var(--letterboxing-border-radius);
  border-top-left-radius: var(--letterboxing-border-top-radius);
  border-top-right-radius: var(--letterboxing-border-top-radius);
  width: var(--letterboxing-width) !important;
  height: var(--letterboxing-height) !important;
}

:root:not([inDOMFullscreen]) .letterboxing.letterboxing-ready .browserContainer:not(.responsive-mode)
  > .browserStack:not(.exclude-letterboxing) {
  place-content: var(--letterboxing-vertical-alignment) center;
  background: var(--letterboxing-bgcolor);
}

And these are the Tor-specific branding overrides:

letterboxing {
  --letterboxing-bgcolor: var(--color-grey-light-20, #F0F0F4);
  --letterboxing-gradient-color1: rgba(0, 219, 222, 0.02);
  --letterboxing-gradient-color2: rgba(252, 0, 255, 0.02);
}

@media (prefers-color-scheme: dark) {
  .letterboxing {
    --letterboxing-bgcolor: var(--color-grey-dark-10, #52525E);
    --letterboxing-gradient-color1: rgba(0, 219, 222, 0.06);
    --letterboxing-gradient-color2: rgba(252, 0, 255, 0.06);
  }
}

Thank you @ma1!

Just to be clear, Tor Browser 13.5a4 is not affected anymore since !905 (merged). Mullvad Browser 13.5a4 had already shipped when the patch landed, and will be fixed in 13.5a5.

I understand, it was just a little sudden as we were mid-design review and still wrapping our heads around the fix. I may have one or two small changes, but overall I think this is working very nicely <3

closed

Is the original issue present to the same degree at different border radiuses? e.g. 4px?

marked this issue as related to #42390 (closed)

mentioned in issue #42390 (closed)

mentioned in issue #42389 (closed)

Visual noise in 13.5a4 letterboxing

Designs

Child items 0

Activity