Rounded corners broken with Zen Dream and Zen Galaxy

[kittybwained]

Captchas

• [X] I have read the instructions.
• [X] I have searched existing issues and avoided creating duplicates.
• [X] I am not filing an enhancement request.

What happened?

The latest update broke the rounded corners on the Zen Dream and Zen Galaxy themes. The square webpages now render on top of the rounded corners.

Reproducible?

• [X] I have checked that this issue cannot be reproduced on Mozilla Firefox.

Version

1.0.1-a.1

What platform are you seeing the problem on?

Windows

Relevant log output

No response

[linear[bot]]

ZEN-1592 Webpage renders on top of rounded corners

[kittybwained]

Found a workaround, add:

browser {
    border-radius: var(--zen-webview-border-radius, var(--zen-border-radius)) !important;
}

to your userChrome.css file.

[kittybwained]

Found a workaround, add:

browser {
  border-radius: var(--zen-webview-border-radius, var(--zen-border-radius)) !important;
}

to your userChrome.css file.

Note that this still doesn't make it identical to the other themes, it just makes it less bad. On dark webpages, the rounded corners look a bit strange and pixelated with this fix.

[kittybwained]

Light: Zen Dream with fix: Zen Dream without fix:

Not perfect but less bad. Also, for reasons I cannot figure out, the fix doesn't work on certain websites.

[kittybwained]

Still happens on 1.0.1-a.2.

[JLBlk]

Here's another workaround i found, since my supergradient theme had the same problem:

:root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']) {
  & #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
    overflow: hidden;
  }
}

Just add it to your userChrome.css