1778352 - Wrong hover/clicking order between #sidebar-box and #appcontent

Status: RESOLVED INCOMPLETE

(WebExtensions :: Untriaged, defect)

Description

[Drath]

Steps to reproduce:

1. Install firefox 103b1
2. Install Tab Center Reborn addon
3. Add the following UserChrome.css/custom styling

    position: relative;
}

#sidebar-box:not([hidden]) {
    display: block;
    position: absolute;
    min-width: 44px;
    max-width: 44px;
    overflow: hidden;
    transition: all 0.2s ease;
    z-index: 1;
    top: 0;
    bottom: 0;
}

@media (width >= 1200px) {
#sidebar,
#sidebar-box:hover {
min-width: 10vw !important;
max-width: 10vw !important;
}
}

#sidebar {
max-height: 100%;
height: 100%;
}

#sidebar-box:not([hidden]) ~ #appcontent {
margin-left: 44px;
}

Actual results:

The tabs are clickable through the main page content.

Expected results:

They should not be clickable unless hovered.

Comment 1

[Drath]

Attachment: simplescreenrecorder-2022-07-06_18.53.52.mkv

Video example

Comment 2

[Drath]

Also:

• This works as expected on firefox 102.0 and 102.0esr, but is broken on 103b1 through 103b5
• The style is a boiled down version of a fairly popular userchrome customization
• I was unable to reproduce this with bookmarks and history sidebars, haven't checked any other addons

Comment 3

[Drath]

Something happened with markdown during posting, and, since I cannot edit comments, here it is again.

#browser {
    position: relative;
}

#sidebar-box:not([hidden]) {
    display: block;
    position: absolute;
    min-width: 44px;
    max-width: 44px;
    overflow: hidden;
    transition: all 0.2s ease;
    z-index: 1;
    top: 0;
    bottom: 0;
}

@media (width >= 1200px) {
    #sidebar,
    #sidebar-box:hover {
          min-width: 10vw !important;
          max-width: 10vw !important;
      }
}

#sidebar {
    max-height: 100%;
    height: 100%;
}


#sidebar-box:not([hidden]) ~ #appcontent {
    margin-left: 44px;
}

Comment 4

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Audio/Video: Playback' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 5

[C.M.Chang[:chunmin]]

Hi Drath, thank for reporting this. Can you reproduce this without Tab Center Reborn? It might be a Tab Center Reborn issue instead of Firefox's one.

This is not a media bug so moving this to WebExtentions.

Comment 6

[Alex Cornestean]

Hello,

I attempted to reproduce the issue on the latest Nightly (104.0a1/20220721214008), Beta (103.0/20220718155818) and Release (102.0.1/20220705093820) under Windows 10 x64, however without success.

I managed to properly apply the custom styling provided in Comment 3 and while using Tab Center Reborn I could not manage to click through the main page content to select the tabs in the add-on sidebar. I’ve checked if the issue occurs with the bookmarks and history sidebars, but could not reproduce the issue there, either.

I’ve also checked an older version of Beta (103.0b2/20220628190840) and can confirm that the issue occurs there as depicted in the video recording from Comment 1. Still, bookmarks and history sidebars are unaffected.

Overall, the issue no longer occurs on the latest Firefox versions.

Comment 7

[Drath]

Hello!
Thanks for looking into this. Unfortunately, the issue still persists in the latest Dev Edition (103b9).

It doesn't seem to happen with bookmarks and history sidebars, but it is reproducible with other side tab addons such as tree style tabs and sideberry.

I've recorded the whole process on reproducing this bug, including installing a fresh browser and creating a new profile, just to eliminate any other influences. File size was just a bit over 10mb so I uploaded it to youtube instead: https://youtu.be/NQKk7K21oKc

Comment 8

[Alex Cornestean]

Hello Drath !

I followed the video you linked exactly as shown and I still cannot reproduce the issue on the latest Nightly (104.0a1/20220724190402), Beta (103.0/20220718155818) and Release (102.0.120220705093820) under Windows 10 x64 or Ubuntu 16.04 LTS.

I can however reproduce the issue on, for example, Beta 103.0b4 and Beta Developer Edition 103.0b9 (as in the video).

It seems the issue has been resolved on the latest browser versions, as I mentioned in my previous comment.

Also, in case it might help with further debugging, I noticed that the issue (on the browser versions it can be reproduced on) will only occur if a blank new tab or any tab with a non-privileged website is focused from the sidebar. If a tab with privileged page (about:addons, about:support, etc) is focused, the issue does not occur.

Comment 9

[Alex Cornestean]

Attachment: 2022-07-25_11h32_52.mp4

Comment 10

[Rob Wu [:robwu]]

This does not look like a bug in the extension framework itself.

From the video in comment 9, it looks like Firefox is interpreting the mouse pointer as pointing to the (extension) content in the sidebar, while the pointer is visually outside of the sidebar.

I think that there may still be an actual bug here, but to ease the investigation, I suggest to create a smaller test case:

• Minimal CSS modifications (userChrome.css or devtools sheet) to shrink the sidebar.
• Minimal extension / sidebar HTML to show when the content seems to be hovered (could be HTML+CSS, maybe with a bit of JS).
• Written steps for what you did in the video from comment 7, particularly how you apply the CSS and hover the mouse.

I am closing the bug because the immediate trigger of this bug are multiple unsupported userChrome.css customizations. If you can reduce the reproduction steps to something simpler that clearly points to a bug in Firefox, then it would be more feasible to triage, investigate and resolve the bug.