sticky-sidebar still makes the sidebar appear on top of the search results in the homepage of a repo in Firefox

[DanielMiao1]

This issue is only present in Firefox-like browsers, where the previous fix, 1d14916, uses a :has css selector that the Gecko rendering engine does not yet support.

Because this issue describes the same visual problem as the now-closed issues #6151, #6225, and #6260, should further discussion be moved to one of those threads?

Description

When the sticky-sidebar feature is enabled, the sticky sidebar in all repository roots (e.g. https://github.com/refined-github/refined-github) visually appears on top of search suggestions and the search modal backdrop.

Is the :has really required in the selector? It appears that the has part of the selector causes the rules to increase z-index to apply to search inputs and dialogs where a sticky sidebar (.rgh-sticky-sidebar) exists, even though the search elements should have a high z-index on all pages.

Here are some unnecessary screenshots of the issue:

How to replicate the issue

1. Install the extension in Firefox or similar browsers via addons.mozilla.org
2. Enable the sticky-sidebar feature in the extension settings
3. Navigate to a GitHub repository root page (e.g. https://github.com/refined-github/refined-github), where the issue can be observed.

Extension version

23.4.15

Browser(s) used

64-bit:
Firefox Developer Edition 111.0b8, Firefox Nightly 112.0a1, and Waterfox G5.1.3 on macOS 13.2, Firefox 108.0.1 on Ubuntu 22.04.1, and Firefox 110.0.1 on macOS 10.14.6

[Rhys-T]

Not sure whether this should be considered the same issue, or just a related one that should be opened separately, but: Something very similar is happening to the hamburger menu on the mobile version of the site - at least when I'm not logged in (or rather, when I have a .Header-old rather than a .Header). There, the problem seems to be .Header-old's z-index of 32. (The new .Header has the same z-index, but its version of the menu isn't positioned - it seems to just push the rest of the page down.)

Screenshot

[fregante]

Similar bug, but Refined GitHub only officially supports logged in users.

[Rhys-T]

Similar bug, but Refined GitHub only officially supports logged in users.

Ah, okay - hadn't realized that. I usually am logged in, and I haven't noticed that version of the header appearing while logged in, but I wasn't sure if that was actually what controlled .Header vs .Header-old or not.

[fregante]

See #6508

For the time being, you can either disable the sticky sidebar feature or add this condition-less CSS to your options:

/* 
https://github.com/refined-github/refined-github/issues/6408
https://github.com/refined-github/refined-github/issues/6151
*/
.search-input.expanded .search-with-dialog {
	z-index: 95 !important; /* Native: 35 */
}

.search-input.expanded .dark-backdrop {
	z-index: 92; !important /* Native: 32 */
}