Hi, I want to solve this behavior when scrolling in ‘about:addons’ page. I put a background-image in body using ‘userChrome.css’ and in ‘userContent.css’ I set transparency in some elements backgrounds, but when I scroll the element goes behind .sticky-container element, so here is my question: Can I make the and .sticky-container elements don’t cross, I tried to set a margin, clip-path, etc but I couldn’t make any progress to solve it.
hi, I had in that way in the past, but I wanted to remove the need to align the image (when menubar is on, when not, when bookmarks-bar is on, when not, where using tre-tabs and its necessary to align again). I will end removing the
position: stickyfrom.sticky-containerOh I think I misunderstood what you are doing, I thought you meant you set the content document body to also have the background-image, in which case the same alignment issue would still happen. But it sounds like you have just one image at the main-window body and the content area is transparent.
With some shuffling you could achieve pretty much the same result visually - so that the header sticks, but doesn’t overlay the list:
@-moz-document url("about:addons"){ #content{ max-height: 100vh; display: grid; grid-template-rows: auto auto 1fr; --in-content-page-background: transparent; } #page-header > .sticky-container{ position: static !important; } #main{ overflow: auto; padding-inline: 6px; scrollbar-gutter: stable; } }thanks you so much, the scrollbar isn’t in the right position but I thinks is perfect enough solution. 💙