Next.js Discord

Discord Forum

Broken site on scroll

Answered
Northeast Congo Lion posted this in #help-forum
Open in Discord
Northeast Congo LionOP
Hi, weird weird issue with a site i have built (https://shories.io). Website is all static, no dynamic data etc, all hard-coded.

When I scroll on mobile (iPhone / Chrome), the sections are invisible/not loaded, and 2-3 seconds loader they load in.

When i scroll back to top, and then try back down the same issue happens. Wtf is going on? I've never seen this issue, like nextjs is unloading the sections and re-loading them on scrol..
Answered by Northeast Congo Lion
it's nowhere near as laggy etc, so it's gotta be the crazy SVGs + CSS i have applied for the shapes
View full answer

118 Replies

Clown
For some reason i dont see this happening for me
:/
not-milo.tsx
Weird, for me it works just fine :thinq:
Northeast Congo LionOP
interesting my client sent a recording
but let me send u one i just took on my phone
idek where to start with it
Clown
Which browser are you using?
Northeast Congo LionOP
iphone with chrome
im not even reloading
im simply scrolling up and down
not-milo.tsx
oooohhh... that
Northeast Congo LionOP
like wut
not-milo.tsx
it might have something to do with your css
Northeast Congo LionOP
what sense do you think?
built it same way I do other sites this is first time ive saw this
build log
i would be okay if this happened on initial scroll, but the fact it happens on way down/up/down/up
it's like the sections out of viewport are unloaded
not-milo.tsx
It looks like the browser is struggling to render the background... Your elements are still there, you just can't see them for a brief moment
Northeast Congo LionOP
yeah
like its only on mobile
even tried updating all packages, still no joy.
not-milo.tsx
Yup. Definitely a css issue tied to the linear gradient you have set on your html element. It happens on desktop too but it's way less noticeable.
Northeast Congo LionOP
got it
maybe moving it to body
?
will help instead of html
not-milo.tsx
It's worth trying, but I don't know how impactful of a change it would be.
Northeast Congo LionOP
it did not.
not-milo.tsx
Can you work around it and avoid using the gradient? It's might be a performance issue inherent to the gradient... 🤔
Northeast Congo LionOP
yeah
i can see the issue kind of on firefox
if i scroll really fast the site can't be rendered in time
do you think some of the SVGs on site could be breaking performance?
not-milo.tsx
No, that shouldn't be an issue since you're not loading huge graphics.
Here's something you can try. Add hints for the browser and suggesting it to use GPU acceleration for specific elements.
html {
  transform: translate3d(0, 0, 0);
  will-change: background;
}
It might improve rendering performance for the gradient. If that doesn't help try adding it to a fixed element that takes up the entire viewport and doesn't move nor resize.
Northeast Congo LionOP
i think i might've found the issue
not-milo.tsx
You did?
Northeast Congo LionOP
nah 😭
i thought i did, but it wasn't
even tried changing bg colour from gradient to solid #000 and moving to body, and even .wrapper (child of body but contains all content) and it's still buggy.
not-milo.tsx
I found a solution ✨
Northeast Congo LionOP
plss share
not-milo.tsx
Add this element at the top of your body:
<div class="fixed-bg"></div>

and give it these styles:
.fixed-bg {
  background: linear-gradient(180deg, #131111, #090808), #fff;
  position: fixed;
  inset: 0;
  z-index: -1;
}

Tadaaa! No more flickering.
Northeast Congo LionOP
interesting
let me try this my guy
i was mid-typing the code out for it haha
so 2,ins
not-milo.tsx
Of course you also need to remove it from the html
Northeast Congo LionOP
ur right
its fixed the desktop version for sure
so i have to assume its fixing the mobile 😛
i have never ever in my life of coding
seen a background-color cause so much issue
just re-building rn
not-milo.tsx
Eh, the good old css can give you headaches at times :lolsob:
Yup, it's gone :success:
Northeast Congo LionOP
did u see mobile?
okay that fixes the white flash issue, but why are my elements constantly being re-drawn
@Northeast Congo Lion okay that fixes the white flash issue, but why are my elements constantly being re-drawn
not-milo.tsx
More performance issues I guess, but it's not that bad now and realistically your users/visitors won't scroll up and down that fast. so it might just become a minmaxing issue with diminishing returns
Northeast Congo LionOP
i fail to see how, all static site, no real moving parts
not-milo.tsx
It's not about dynamic elements but rather the browser's internal rendering engine struggling at times
You could spend hours trying to absolutely optimize everything but I don't think it's really worth it
@not-milo.tsx You could spend hours trying to absolutely optimize everything but I don't think it's really worth it
Northeast Congo LionOP
yeah, sadly the client wont accept this so back to drawing board i guess
thank you very much for ur help ❤️
wasn't an issue when the site was initially launched like 1 month or so ago, so I am not sure whats went wrong
@Northeast Congo Lion yeah, sadly the client wont accept this so back to drawing board i guess
not-milo.tsx
I'm sorry for you but your client is really stubborn 😅
Northeast Congo LionOP
yeah, i have never seen a website do this tbh
@Northeast Congo Lion wasn't an issue when the site was initially launched like 1 month or so ago, so I am not sure whats went wrong
not-milo.tsx
It might not be something you did. Maybe Chrome had an update or something like that, idk
Northeast Congo LionOP
issue is there on Iphone, regardless of browser
I wonder if it's another wonderful apple move
not-milo.tsx
As a last suggestion. For any other stuttering and issues try simplifying everything from markup to styles as much as possible where you can.
Bengal
I just opened your website, looks like you have custom scrolling function or smooth scrolling on it. try getting rid of that
Northeast Congo LionOP
i just adde that Luka
to try prevent rapid scrolling
that's not the issue
it's react lenis, i have used that on lots of nextjs projects
not-milo.tsx
By the way, [npmjs.com](https://npmjs.com) has the same issue but I don't see them freaking out about it. :thinq:
If you can, bring some examples to your client and tell them it's somewhat expected and normal.
Northeast Congo LionOP
interesting
Bengal
Northeast Congo LionOP
yeah thats the issue
ignore the top and bottom white bits, but it's re-drawing every element on scroll after that section leaves the viewport and comes back in
Bengal
It's either something with custom scrolling or lazy loading
Northeast Congo LionOP
its neither
its a fully static site, all images are imported from public
theres no real Image tags used
no suspense
it doesn't explain why it's re-drawn when entering/exiting viewport, that's my issue
And for some reason its not even happening in the shories website now
Northeast Congo LionOP
for mobile?
desktop is perfect for me, no rendering issues.
iPhone across any browser is broken
i timed it and if i scroll out and back, i waited around 1.75 seconds for a simple title/text to be drawn on screen
Clown
Weird then, ig its a IOS related issue. Can you replicate the same with sites like github.com or nextjs's site?
Northeast Congo LionOP
it's fine for them, just checked on mobile and tried to rapidly scroll
@Clown Happens only on chrome to me tbh. Its fine with Brave or Firefox
not-milo.tsx
Yeah. That's the thing. Not every browser behaves the same way
Northeast Congo LionOP
i have omitted all sections, so gonna work back and try detect if there is a specific issue that is maybe over-using resources
Northeast Congo LionOP
made.0 difference
Northeast Congo LionOP
hol up, i may be on to something
not-milo.tsx
Was that section the culprit?
Idk, it really seems like a non issue rn... (apart from the missing section :thinq:)
Northeast Congo LionOP
well
@not-milo.tsx Was that section the culprit?
Northeast Congo LionOP
when I commented out the css for the shapes like the blue cricles, big svgs etc
i had 0 rendering lag
not-milo.tsx
Can you give me a code example? I'm curious
Northeast Congo LionOP
ill need to clear it with client
as it's a private project, so i could get into hot water if. share code 😛
not-milo.tsx
Relatable. I signed an nda too when I joined the agency I work for :meow_peek:
ive 100% got it in a better shape
Northeast Congo LionOP
it's nowhere near as laggy etc, so it's gotta be the crazy SVGs + CSS i have applied for the shapes
Answer
Northeast Congo LionOP
yup fixed the issue by hiding all shapes etc on mobile 🙂
appreciate the help lads ❤️
not-milo.tsx
Great!