Margin of dw-forum container changes when scrolling
When I go to your main "topic view" page using either Brave or Firefox, and I scroll down enough that the "sticky" navbar at the top to be noticeable, the margin on the div
with the class container dw-forum
changes by exactly 100 pixels, causing the screen to jump suddenly to the right.
Strangely, this doesn't happen on Safari.
I did poke around the CSS and it's not obvious what's going on.
- KajMagnus @KajMagnus2025-03-24 07:18:56.286Z
Yes I've noticed the screen jump me too (using Chrome). Does Safari and Chrome render the CSS & HTML differently when scrolling down and the topbar becomes
position: fixed
and gets taken out from the flow? Hmm.If I change the topbar
.s_TbW
todisplay: none
, then the jump happens directly, without me having to scroll down. Maybe that's a simpler way to investigate what's happening (togglingdisplay: none
on/off).Apparently I gave up (since the problem is still here), and accepted the layout jump when scrolling down. If you can figure out what's happening (and what looks / is the best behavior), that'd be interesting :- ) and I'd guess it'd be a quick CSS fix, once it's clear what's happening. Not saying it's that super well spent time though
- In reply togwd_laleo⬆:KajMagnus @KajMagnus2025-03-26 14:36:34.398Z
Anyway, it would be nice to get this fixed some time. Marking it as Planned & added a priority tag
- In reply togwd_laleo⬆:KajMagnus @KajMagnus2025-03-27 07:13:46.765Z
Found it! (Was a bit fun to investigate.) Turns out it's a
margin-top: -10px
that pulls the topic list up a bit (10px), so it overlaps with the topbar. Then, the browser places the topic list in the middle of the stuff in the topbar, instead of in the middle of the page.(And, how much space is available to the left and right in the topbar, depends on how wide [the open sidebar buttons] in the topbar happen to be. E.g. the
X online in this forum <
button in the upper right corner that opens the right hand sidebar.)When scrolling down, the topbar becomes
position: fixed
, and then the topic list no longer gets pulled up into the topbar by themargin-top: -10px
(since the topbar is now taken out of the flow, because it'sposition: fixed
).(I actually had to ask an LLM why
margin-top: -10px
could affectmargin-*left*
and-right
(!))So, now the topic list gets horizontally centered in the middle of the page (instead of in the middle of the whitespace in the topbar), and thus suddenly jumps to the right, or to the left, a little bit, depending on what elements & widths happened to have been in the topbar when it still was
static
.***
So I'll either remove
margin-top: -10px
or change toposition: relative; top: -10px
, depending on what looks best. (The point withmargin-top: -10px
was just to remove some unnecessary whitespace, making the layout look nicer, at least I thought so back then) - Progresswith handling this problem