Background colors only show up after some scroll on mobile

Hello! this is my first time posting here but this forum has helped me a lot with the already existing topics, so I am sure the wonderful people here will help me out

So I have created a portfolio website for myself. At the home page I have blurred colors in the background (I saw a video from Nelson on YouTube and loved the idea). They work fine when I am in the designer mode while I am checking all the breakpoints.
But when I open the website on my phone, there is kind of a glitch that I am not able to figure out. The background colours start showing up only when I have scrolled a little. You will better understand by watching this video I recorded through screen recorder - 22-05-26-00-42-02 (1).mp4 on Vimeo
Once again, the problem occurs only when I am opening the site on mobile and not in the mobile breakpoint of the designer mode.
I’d appreciate any help. It’s not a big problem but it is frustrating not being able to figure out what’s causing it.
(There is only one custom code I am using and it is for smooth page transitions, I got it from one of Timothy’s YouTube videos)

Here is my site Read-Only: [LINK](Webflow - Akarshan's Portfolio)
(how to share your site Read-Only link)