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
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Myndi
Myndi•2y ago
Hmm, stuttering where or around where?
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Myndi
Myndi•2y ago
Hmm, why is that cut off WorryHmm shouldn't be like that. Is there any chance whatever you're using to recolor it might be messing it up?
b1mind
b1mind•2y ago
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
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Myndi
Myndi•2y ago
And now I wonder how the frick that breaks it.
b1mind
b1mind•2y ago
That ... now that I can't tell you overflow and scroll is very.... interesting
Myndi
Myndi•2y ago
It's overriding the whole's webpage color. That's what I was wondering.
b1mind
b1mind•2y ago
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 >.>;;
Myndi
Myndi•2y ago
I was using Kevin's technique to place images in the background with an overlay 😩
b1mind
b1mind•2y ago
Yea I mean it works fine I'm just saying the why
Myndi
Myndi•2y ago
That's legit so odd, lol.
b1mind
b1mind•2y ago
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-top
Myndi
Myndi•2y ago
What's that for? NoThinkNoDie
b1mind
b1mind•2y ago
https://codepen.io/b1mind/pen/bGVemWx Handy prop to add "margin" to the top of the anchor well the scroll of it
Myndi
Myndi•2y ago
Oh, but I like the way it is right now.
b1mind
b1mind•2y ago
Really handy if you don't want the anchor to hit the top
Myndi
Myndi•2y ago
Maybe I'm too accustomed to it. And where do you set this, on every link?
b1mind
b1mind•2y ago
just that one that is screwing up, it goes on the #id-anchor
Myndi
Myndi•2y ago
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)
b1mind
b1mind•2y ago
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
Myndi
Myndi•2y ago
At this rate, I should pull a div apart just for this background image.
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Myndi
Myndi•2y ago
For the scrolling thing, I removed the overscroll behavior. Few parts had it.
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Myndi
Myndi•2y ago
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.
b1mind
b1mind•2y ago
Oh nice going to have to remember that one
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Myndi
Myndi•2y ago
It's good for desktop, but annoying for mobile sadCat
b1mind
b1mind•2y ago
#webDevLife
Want results from more Discord servers?
Add your server