Fix double scroll bar on Firefox

[Indanz]

Tested with both Chrome and Firefox, seems okay for both.

Maybe it affects rendering somewhere else, but if so, an "overflow-y-auto" may need to be added in those places, instead of globally.

[lsf37]

That does break the layout globally -- the header (menu) is supposed to stay fixed on top when you scroll the rest of the body (hence the overflow-y-auto). If you scroll the menu, the site not really usable on mobile any more.

[Indanz]

That does break the layout globally -- the header (menu) is supposed to stay fixed on top when you scroll the rest of the body (hence the overflow-y-auto).

But that isn't the purpose of overflow-y-auto. Also, it is part of the div next to the header. It seems weird to rely on overflow behaviour instead of using e.g. z-index and absolute positioning for the header or something like that.

If you scroll the menu, the site not really usable on mobile any more.

Other than the header not staying visible at the top, is there anything else that breaks? If that's all, I'll try to find an alternative solution.

[Indanz]

On the current website it matters where my mouse pointer is what happens: It either zooms the graph, or it scrolls the page, but depending on where the menu bar stays fixed or scrolls away on Firefox.

[lsf37]

Ok, I think I got it in #547 -- at least on Mac and Windows Firefox is now behaving correctly.

[lsf37]

That does break the layout globally -- the header (menu) is supposed to stay fixed on top when you scroll the rest of the body (hence the overflow-y-auto).

But that isn't the purpose of overflow-y-auto.

It is -- it enables scrolling on the element that it is on, which is exactly the rest of the flex element (height = screen) that is not the header.

Also, it is part of the div next to the header. It seems weird to rely on overflow behaviour instead of using e.g. z-index and absolute positioning for the header or something like that.

z-index with fixed position doesn't work -- I know people use it, but since that always obscures the top of the screen, you always have to leave empty space in the rest of the body. You can compensate for that with pages that don't scroll, but as soon as you want to link to headings within a page you now have to make sure each heading has at least height(header) space on top, which within normal text looks terrible.

If you scroll the menu, the site not really usable on mobile any more.

Other than the header not staying visible at the top, is there anything else that breaks? If that's all, I'll try to find an alternative solution.

I think I have it in #547

[Indanz]

I think I have it in #547

I fixed this one too I think. But I don't really understand how the navbar is kept at the top in the current code, so what I added probably made whatever that is redundant now. Actually, the mobile navbar does exactly what I added and uses"fixed inset-x-0 z-10 top-0", but no idea why that isn't also used on the desktop navbar, which uses ""mx-auto flex fixed inset-x-0 z-10 top-0" and something of that makes it work.

[Indanz]

But that isn't the purpose of overflow-y-auto.

It is -- it enables scrolling on the element that it is on, which is exactly the rest of the flex element (height = screen) that is not the header.

It determines whether the scrollbar is shown or not. It does nothing for whether the navbar stays visible or not while you scroll. So what you did is replace the normal page scrollbar by adding another one and making the content in there scroll instead of the whole page. And your fix is to disable the default scrollbar and keep this one.

[Indanz]

Closing this as the other solution also works and is a smaller change. The website CSS seems overly complicated, but cleaning that up is another project.

[lsf37]

But that isn't the purpose of overflow-y-auto.

It is -- it enables scrolling on the element that it is on, which is exactly the rest of the flex element (height = screen) that is not the header.

It determines whether the scrollbar is shown or not.

Yes, correct. (For the page body)

It does nothing for whether the navbar stays visible or not while you scroll.

The navbar is a different element, and the overall page is a flex box with the height of the screen -- it should never show a scrollbar (which all browsers did agree with before Firefox 143).

So what you did is replace the normal page scrollbar by adding another one and making the content in there scroll instead of the whole page. And your fix is to disable the default scrollbar and keep this one.

Mostly yes. I maintain that it is a Firefox bug that the html scroll bar is ever shown, because the height of that html element is always the screen height. Within that element, the body has a scroll bar, and the rest does not.

[lsf37]

Closing this as the other solution also works and is a smaller change. The website CSS seems overly complicated, but cleaning that up is another project.

I do not think it overly complex, at least it is the simplest solution that I found that keeps the header at the top, scrolls the main body and behaves correctly when you link to anchors within the main text body (shows the anchor beneath the header, not obscured by the header).

[lsf37]

I think I have it in #547

I fixed this one too I think. But I don't really understand how the navbar is kept at the top in the current code, so what I added probably made whatever that is redundant now. Actually, the mobile navbar does exactly what I added and uses"fixed inset-x-0 z-10 top-0", but no idea why that isn't also used on the desktop navbar, which uses ""mx-auto flex fixed inset-x-0 z-10 top-0" and something of that makes it work.

Those all refer to the enclosing flex box, not the entire page. Changing those should not do anything to the rest of the page (maybe it changes a pixel that causes Firefox to not show a scroll bar, but that is then just an accident).