Problem with subscriptions - Slow scroll

Developer help
1

I don’t have any problem now (I solved it) but I am writing this post for future users who may have these issues.

A couple of days ago, I decided to transfer my blog from Wordpress to ghost(self-hosted). I changed the Casper theme to manage to look like my old theme in WordPress. Then I upload it to my Ghost platform.

I noticed some problems:

  • When I scrolled in google chrome, the scrolling effect was awful (slow and glitch)
  • In my phone (android) the font wasn’t rendered well.
  • I couldn’t see, from my backed, the front-end of the page (303 error)

So, I changed the theme to the original. Same problem. Then, I remembered that I had activated subscriptions. And that was the problem.

You can find the same issue, in another blog: blog.stephsmith.io

*Sorry for my English, I am not a native.

2

I have heard some of my users say the scrolling experience was horrific on my site, but I can absolutely not reproduce it myself.

You say that you found that it was the subscribe button, that was the problem. Let me know if you have the same problem on my site: mlfromscratch.com

I would like a fix other than deactivating the subscriptions, as that is quite an important piece of the puzzle of my website.

3

Yes I see the same issue in your blog.

Normal Scroll:

Slow Scroll (your blog):

4

Ahhh this is horrible!

Any of the Ghost staff able to help us out on how to fix this?

5

Look at the referenced post for details :slight_smile:

6

I’m struggling to see this scrolling issue. If there’s anything that’s affecting the scrolling smoothness it’s additional page weight in the form of large images or embeds like Disqus. For example these gifs could be slowing the page down on slow internet connections:
37

It’s recommended compress images as much as possible, and in some cases a video is smaller than a gif. You can also use modern development techniques to defer the loading of embeds such as Disqus comment until you think the user needs them:

Hope this is helpful :slightly_smiling_face:

7

Hey David, I’m not sure if this is present in the Lyra 3.0 theme, as the GIFs above in the example of slow scroll was for 2.0.

Also, I’m not quite sure it’s possible to upload a video to the Koenig editor and make it behave like a GIF. Then we are talking a third party solution like vimeo or youtube?

@nikkos can you test if the new theme still has the same issue? I just updated my website for 3.0 :slight_smile:

8

Is the Lyra theme the one you’re using and seeing the slow scrolling in? Uploading a video can be done with the HTML card and the video element, or yes a YouTube or even just some image compression :slightly_smiling_face:

9

I am actually facing the issue with fonts as well. I haven’t really noticed it with the scrolling but the fonts seem blurred and broken on an Android device and fine on an iOS device.

I just upgraded to Lyra 3.0 to have the option of using the membership feature. Any ideas what could be causing this and how to fix it?

I am also attaching a screenshot where you can see the issue if you look closely. Especially on the subscribe button.

broken-fonts
broken-fonts.jpg540×1080 57.9 KB

10

With the font rendering issue I anticipate it’s down to the CSS. We can look into it, but the theme is open source so if you, or anyone else in the community, would like to dig into it and submit a fix that’d be super cool:

11

I tried forking it to check it out but I am not quite sure how to get started. I ran yarn to do the install and then tried yarn dev but where exactly does the app run?

Eventually, I ended up creating the zip and then using that on my local install of ghost but surely there’s a better way than just changing things, uploading the zip again (manually) and then checking how things look?

12

You’re right! There is :sparkles:, you can use our new GitHub Action to automatically push your theme code from GitHub directly into your Ghost site. Check it out over here on GitHub:

13

I was looking into this and will probably use this in production. But what about in development? Is there a way to just run the theme so I can check for changes as I make them?

14

You’ll need to set up a local version of Ghost as the theme itself won’t have any content to show. We’ve documented the setup on in our Docs under ‘Developing themes’:

15

Ah, I see. It makes more sense now. I am going to play around with it.

Thank you, David!

1 Like
16

This is a recurring issue for me. But it’s mostly when using an external mouse, not a touchpad.

It’s like a super bad slow scroll, which happens with both the Lyra and Casper theme.

17

If you’re noticing the difference when using a different type of mouse then that cannot be down to the theme. Have you compared your theme usage against the demos of Lyra and Casper? https://lyra.ghost.io/ & https://demo.ghost.io/

18

It’s tested on basic Casper and Lyra themes, both themes are effected. I made an issue over on github, see the details over there.

TouchPad scrolls smoothly up/down with micro movements, while mice scroll up/down like a wheel with indents. This is usually no problem, and I don’t know why it’s occurring in Ghost.

The difference here is actually that when scrolling with a mouse, it jumps up/down a bit. Then here comes the difference, it’s laggy when scrolling with a mouse.

19

It’s 100% the theme / Ghost core, nothing else. There is something wrong with the way scrolling works, when enabling Members.

When is this issue expected to be handled/is it going to be taken care of?

20

PRs are always welcome ;-) Otherwise the answer is as it always is - it’ll be fixed when it’s fixed, there are no timelines or roadmaps for individual minor issues. Everything is open source, if there’s a particular issue that is causing you problems then you are free to use your own resources or recruit help to fix it.

3 Likes