Laggy scrolling on high resolution screens
samleez opened this issue · 15 comments
Hi there,
First of all, I want to say that this starter is one of the best starters of gatsby out there, with that being said there are some issues I encounter from the first use:
1- The scrolling is not smooth and feels like the theme is going to crash or freeze which gives a totally uncomfortable user experience, I found out the issue is originated from Casper https://github.com/TryGhost/Casper
2- The animations of the posts containers, every time I experienced a delay when I move over with the mouse.
3- Performance Audit I have been doing a lot of audits on this starter and the main issue I found is the images, for some reason all the tools I have used state that the theme needs to serve scaled images.
Hope I will get some useful insights here
@scttcper
Here's the same issue from the default theme for Ghost Casper
https://github.com/TryGhost/Casper/issues/658
Anyone have noticed this issue?
Laggy scrolling where? On the blog page? How many images? Are you using a production build? Does the demo lag when scrolling? What browser?
Laggy scrolling where? On the blog page? How many images? Are you using a production build? Does the demo lag when scrolling? What browser?
Well first of all the issue is has to do with Casper
see the same issue here:
https://github.com/TryGhost/Casper/issues/658
- Laggy scrolling on all pages.
- The image issue I can handle it.
- Yes, I used developed build and production build and the issue remains.
- Yes, the demo lag when scrolling.
- Tested on chrome both pc and android. while in android is a little bit smoother.
- The starter seems to work in opera a little bit smoother.
Also, I have noticed when resizing the browser to a small window it starts scrolling smoothly
It most likely has to do with how they're doing the flow of the page and how intense it is on the gpu, there's pretty intense css. When the page shrinks it changes to the alternate layout declared here https://github.com/scttcper/gatsby-casper/blob/master/src/templates/index.tsx#L28 Could try using that as your page flow by default.
@scttcper sorry scott but I can't figure out where to put that value as my page flow by default. is it in the same file? Index.tsx
easiest way to try it is to change @media (min-width: 795px) to a larger size that triggers it. Or overwrite the styles for .post-card which are in another file
easiest way to try it is to change
@media (min-width: 795px)to a larger size that triggers it. Or overwrite the styles for .post-card which are in another file
It worked great when I changed to @media (min-width: 2000px) i tried 960px and 1440 px but only 2000px worked
its whatever your screen size is. can just remove the @media query and have it on all the time
Hi again @scttcper seems like the issue remains... but I found out that background-size:cover has terrible performance and this starter uses a lot of it, so I removed it and resized and compress the pictures but the lag is still there in high-resolution screens.
It only happens on a high-resolution screen I have tested the starter on 8 different screens and the issue arises only on bigger screens.
Edit
It seems like the following URL: https://casper.ghost.io/ works very smoothly while scrolling with no issue. while the demo in the following URL: https://demo.ghost.io/ is Laggy and slow scrolling.
Seems like it's an issue that related to the browser... the starter works just fine in firefox quantum, brave, and Google Chrome canary Version 80.0.3970.0 and Google Chrome beta Version 79.0.3945.36.
The issue has been fixed
just delete the following line:
Apparently backdrop-filter: blur(3px); is heavy on most browsers. Removing it will remove the lag.
v3 doesn't have the backdrop filter