Annoying banner on top of "bandcamp.com"

[Mark-PM]

That annoying banner on top of https://bandcamp.com/ - covers the login-button (at the upper right corner) almost completely and doesn't go away. Windows & Linux, Basilisk & Pale Moon.

[Moonchild]

Maybe let bandcamp know. It seems to be an intentional design choice to have it at a fixed position with a high z-index (i.e. on top of everything else).
Not sure why it needs a dedicated bar like that to skip to content that's not far below it, anyway.

[vannilla]

That particular element seems to be for accessibility purposes. It should normally be hidden until you give it focus by tabbing into it.
From what I can gather, Bandcamp does so by having the element start with a width of zero and expand to 100% when focused.
It's trivial to perform this trick in a way that works on every browser including Pale Moon, but there is something somewhere inside the pile of front-end frameworks and dependencies (it seems to be something based on Vue) that breaks.

[adoxa]

:focus-visible is not supported, causing the whole rule to fail. Try this userstyle.

Code: Select all

@-moz-document domain("bandcamp.com") {
  .bc-visible-focus-only:not(:focus,:active,:focus-within) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px
  }
}

[FranklinDM]

Filed Issue #2850 (UXP).

[Mark-PM]

Many thanks for your replies, have nice, peaceful weekend!