Scrolling is glitchy on Safari/webkit
nanos opened this issue · comments
This has happened to me since I switched to bird ui. See https://imgur.com/a/Lz4W0kG .
Usually it's just a little jumpy as seen around the 4 second mark - this happens almost every time I scroll more than a few lines at a time. But every now and again, it goes totally bananas, as shown at the end.
Do you have any idea what could cause this?
(This is in Safari on macOS, by the way)
It does appear that something is giving the individual posts a fixed height, when they scroll out of view. That appears to be the thing that causes the jumping 🤔
Thanks for the issue. Safari is a bit tricky, but it should honor the original CSS from the default Mastodon UI.
Can't reproduce this on my MacBook Pro Safari, I don't have an iPhone or iPad to test with. Mastodon core adds the fixed height when it's loading new posts, you can see it on mastodon.social as well:
However, on Mastodon.social the column links are in the right instead of in the bottom and that may prevent it.
Mastodon Bird UI honors the original sticky layout and doesn't intefere with it, the behaviour was fixed in here. There should be not much changes other than the bottom bar.
Does the jankiness happen when you scroll more slowly?
I have no idea what causes this. I'm open to ideas.
Thanks for the issue. Safari is a bit tricky,
Understatement of the century 😂
Yes, I did notice that the same fixed heights are present on mastodon core, without causing that jumping. I will look into it further, to see if I can find out what's causing this.
Yes, the jumping happens when scrolling slowly too. It's not 100% reproducible, but it does happen frequently for me.
Strange stuff ...
Thanks @ronilaukkarinen !
mill check this out, when I’m back in front of my laptop (probably tomorrow) and let you know.
Nope. Sadly that hasn’t helped 😔
Ooof, if Safari's dev tools weren't so terrible, I might even be able to figure out what's going on there, but their dev tools are the worst since IE ...
So, I've been able to narrow it down somewhat. Here is a sample post from my timeline, where this reproducibly happens:
As you can see, this post is 757px high.
As I scroll down, Mastodon removes the child DOM nodes, and replaces them with plain text, while fixing the height of the wrapping <article> node. I assume it does that to prevent memory leaks. I know that this has nothing as such to do with Bird UI, but what happens here, is that the height of the new fixed container is now shorter - only 251px (sorry for the blurring, but I'm not sure how confidential I should keep those post IDs):
Obviously that shorter height leads to everything below that post jumping around, as that post scrolls into and out of view.
This also doesn't appear to happen to all posts. Nor to all posts with status cards. Nor to all posts with taller than usual status cards. Overall it's very mysterious to me.
The interesting question, of course, is 'Why?' and why only on Safari? Makes no sense to me.
But that's how far I've gotten today ...
Actually, interestingly enough, with this specific post I can reproduce this even in Chrome.
Thanks for testing @nanos! Can you link to that post (if possible) so I can test too this evening? Have you tried the same posts in the original Mastodon and it doesn't happen there on Safari?
This is the link to the post: https://social.tourmentine.com/objects/8a2bc7ad-8c6e-4994-b2b4-b503fe18a867
However, this only happens on a timeline, so you'd need to get that post into your timeline somehow, and then scroll to find it.
Scrolling issue also happens on GNOME Web, which also uses WebKit, so it seems like it's WebKit issue rather than Safari issue.
It's frustrating, because I haven't been able to reproduce this properly on Gnome Web or Safari. On Chrome not even the slightest (Windows 11, Pop_OS Linux). Have to test it more when I have time. All contribution to this welcome as I'm kinda hopeless right now with this.
It’s totally weird. I’ve spent a significant amount of time trying to find the cause, but haven’t been able to, beyond what I already wrote above.
I can’t make sense of it at the moment, and have removed bird ui again, because I can’t get it to work.
Yeah. I'll try to look at it again in some point. But since I'm using Chrome as main browser and it does work perfectly there for me, I won't be putting much effort to this right now. I'm all open to ideas and if anyone is eager to test out, I really appreciate it. Will leave this issue open until it's resolved.
Can't reproduce this, I guess it's gone by now. Nevertheless, can't really work on this right now so closing the issue. Feel free to re-comment and re-open if you wish.