SolidOS/issue-pane

In issue view, tabs in underlying pane view show though

Closed this issue · 1 comments

timbl commented

Screen Shot 2020-07-20 at 15 25 12

Something to do with opacity in he style of the tabs and i guess a browser bug

Easiest fix seems to be to specify e.g. z-index:100 for the overlay when it is created, e.g. as part of the OVERFLOW_STYLE.
https://github.com/solid/issue-pane/blob/340d2c2b09e366b042f86679b6063dd69d513bd9/issuePane.js#L25
https://github.com/solid/issue-pane/blob/340d2c2b09e366b042f86679b6063dd69d513bd9/issuePane.js#L572

In tracking this down I learnt that apparently the behaviour is specified by the CSS spec (https://www.w3.org/TR/css-color-3/#transparency): "If an element with opacity less than 1 is not positioned, then it is painted on the same layer, within its parent stacking context, as positioned elements with stack level 0."
The parent stacking context seems to be the root element, the overlay is the only other positioned element, and without a z-index it has stack level 0.

This fix can maybe combined with others in a single PR.