Do you guys have any quick solution to this?
I'm scrolling up and down really fast and you can see some portions are turning white. Please refer to my short recording below: https://screencast-o-matic.com/watch/cYjuXRmdje
I'm using Chrome browser and did some research about and it seems its because of the new issue in Chrome. Hardware acceleration, it can be found in Chrome Settings > Advanced > System > "Use hardware acceleration when available"
Turning it off works but how about in Edge or something similar.
Live Site: https://hitchcliff.github.io/onepage-studio/ Github Repository: https://github.com/hitchcliff/onepage-studio-code
My first suspicion was it would be some JS running that would prevent the browser from updating, after using the chrome dev tools I couldn't see anything obvious.
I then looked at the images you have on the page and they are HUGE, you have some images that are over 10mb! Ideally (and this depends on the context) you should get your images below 100kb (and preferably smaller!).
I would suggest you run all your images through a tool like: https://squoosh.app/ or https://tinypng.com/ - I suspect this will solve your issue. It will take a lot of effort for the browser to process files this big, hence why you are seeing white areas.
In the long term, consider introducing a minification tool as part of your build process to help automate stuff like this.