Odd anchor behavior
Does anyone have an idea on why this might be happening?
By clicking on: "4th section" (yeah, I know it's badly placed), it jumps weirdly, then if you scroll up, it's cut-off, and if you scroll down, the background image moved.
https://cozynova.online/windcutter/#New-Player
Wind Cutter Guide
Comprehensive, concise and dynamic Ragnarok Online guide.
31 Replies
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
Hmm, stuttering where or around where?
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
Hmm, why is that cut off 
shouldn't be like that.
Is there any chance whatever you're using to recolor it might be messing it up?
shouldn't be like that.
Is there any chance whatever you're using to recolor it might be messing it up?Seems to be effecting it 😮 remove this overflow and the jump wont happen and things don't shift. I know your line shows but will have to fix that after 😄 seems height: 101% vs 120% works aight for the line.
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
And now I wonder how the frick that breaks it.
That ... now that I can't tell you
overflow and scroll is very.... interesting
It's overriding the whole's webpage color. That's what I was wondering.
I'd actually say it might have more to do with all the absolute/relative positioning than the overflow 🤔
none the less that is your quick fix >.>;;
I was using Kevin's technique to place images in the background with an overlay 😩
Yea I mean it works fine I'm just saying the why
That's legit so odd, lol.
Yea someone smarter than me would have to tell you why. I don't quite understand it. Another thing you could try is adding a
scroll-margin-topWhat's that for? 
https://codepen.io/b1mind/pen/bGVemWx
Handy prop to add "margin" to the top of the anchor
well the scroll of it
Oh, but I like the way it is right now.
Really handy if you don't want the anchor to hit the top
Maybe I'm too accustomed to it.
And where do you set this, on every link?
just that one that is screwing up, it goes on the #id-anchor
I did the change with overflow and height of the line. Seems to work fine so far.
I still haven't found the stutters grumpy mentioned D:
Although I probably need to change that. It has scroll-behavior of contain.
But I need to figure it out how to remove it for mobile, lol.
It breaks the scrolling flow.
(although, supposedly, people shouldn't be scrolling mindlessly across it, since there's a content table for it)
I forget I can just add it to the element I tried no go
yea so my orig fix seems like your best bet xD
At this rate, I should pull a div apart just for this background image.
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
For the scrolling thing, I removed the overscroll behavior.
Few parts had it.
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
I haven't pushed for it. But scroll stopping is
overscroll-behavior: contain. Basically prohibits you from scrolling past it if you're tapping inside of it.Oh nice going to have to remember that one
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
It's good for desktop, but annoying for mobile 
#webDevLife