search

thunder-app / thunder

Thunder - An open-source cross-platform Lemmy client for iOS and Android built with Flutter
https://thunderapp.dev
GNU Affero General Public License v3.0
732 stars 62 forks source link

Jittery upward scrolling with full height images enabled #487

Open murtaza64 opened 10 months ago

murtaza64 commented 10 months ago

Description
After enabling the "full height images" feature, scrolling upwards in the feed results in noticable jitter.

How to Reproduce
Steps to reproduce the behavior:

  1. Enable full height images
  2. Scroll upward in the main feed

Device & App Version:

CTalvio commented 10 months ago

Duplicate #395 #404

To clarify, the cause is the same, the app does not know what the height of an image is until it loads, causing the jitter. I'll re-open, actually, just to have an issue track this for the feed...

K4LCIFER commented 10 months ago

I appear to have the same issue:

https://github.com/thunder-app/thunder/assets/7829231/d0239014-04c4-4bae-bd45-541f0352d409

hjiangsu commented 9 months ago

@K4LCIFER I'm unable to reproduce the exact jitteriness that is shown in the video. Could you try the latest pre-release version and let me know if this issue is still occurring?

As for general jank (random jumps when scrolling), this is most likely caused by the link previews in the feed. Currently, we don't have checks to determine the height of the images present within links. Because of this, when a link image is loaded, it can push down content when it renders on the screen causing the jank.

One way we can reduce this is to set a static height for all link preview images. This way, the feed can pre-allocate the correct amount of space needed and thus reduce the jank present. Alternatively, we would need to figure out a way to calculate the proper heights of each of those images and pre-allocate the space

K4LCIFER commented 9 months ago

Could you try the latest pre-release version

Which exact version are you referring to?

As for general jank (random jumps when scrolling), this is most likely caused by the link previews in the feed.

I don't think that what I am experiencing is due to links loading in their thumnails thereby changing the length of the feed -- if that is what you mean. The reason that I say this is because if the feed is left to load, the issue remains. So even when all the thumbnails are loaded, the issue will still be there.

hjiangsu commented 9 months ago

@K4LCIFER This version: https://github.com/thunder-app/thunder/releases/tag/v0.2.1-alpha.2%2B14

K4LCIFER commented 9 months ago

If it's alright, I will wait until the next full release at which point I will report back to this thread.

Fmstrat commented 9 months ago

New version fixes it for me. Though I have learned the in-app notification doesn't do pre-releases. Will open a separate issue for that.

K4LCIFER commented 9 months ago

@Fmstrat was your issue the exact same as mine?

Fmstrat commented 9 months ago

Yes.

Fmstrat commented 9 months ago

And I take it back, its not fully fixed. I seem to be able to trigger it by letting the feed sit for a while even in the new alpha, but its less frequent than it was for some reason.

K4LCIFER commented 9 months ago

Ah okay. On 0.2.1+13, the issue is very prevalent.

1Phase1 commented 9 months ago

Can confirm that this issue is still prevalent in 0.2.2 with full height images turned on.

K4LCIFER commented 9 months ago

My app is on v0.2.3+16 and vertical scrolling is still jittery in the same fashion as was shown in this video.

hjiangsu commented 9 months ago

Are you able to give me all the settings that you have changed? Just to see if I can reproduce it on my end!

It could be a combination of settings which may be causing this so I just want to rule that out

Fmstrat commented 9 months ago

The key setting appears to be full-height images.

Screenshot_20230819-131945 Screenshot_20230819-131940 Screenshot_20230819-131936 Screenshot_20230819-131929

Fmstrat commented 9 months ago

I should also note, just quick scrolling to load a bunch of content and then scrolling back up masks the issue a lot. You have to use the app for a bit, letting images load in succession, and have some taller and shorter ones load. Then you can easily see it on slow or fast upwards movement. Going in and out of posts also helps make it worse (for me anyway, but that could simply be loading).

K4LCIFER commented 9 months ago

@hjiangsu: Are you able to give me all the settings that you have changed? Just to see if I can reproduce it on my end!

It could be a combination of settings which may be causing this so I just want to rule that out

Is it possible to export the settings to a file? I don't see a button for it. Or, perhaps, would you prefer me to just send pictures as was done by @Fmstrat?

micahmo commented 9 months ago

Is it possible to export the settings to a file? I don't see a button for it. Or, perhaps, would you prefer me to just send pictures as was done by @Fmstrat?

Exporting settings to a file is only just now being added, so screenshots will have to do for now.

K4LCIFER commented 9 months ago

All my settings are displayed in the following video:

https://github.com/thunder-app/thunder/assets/7829231/ed1e8357-9272-4737-9413-85059d32bcd6

hjiangsu commented 8 months ago

Just gonna circle back to this issue - I'm testing it on the latest alpha and have not managed yet to reproduce the issue as shown in the video @K4LCIFER

However, I do notice a slight stutter when scrolling (not nearly as bad as what the video showed though) - could you try out the newest alpha build and let me know if this is still happening to you?

Fmstrat commented 8 months ago

I can still reproduce.

hjiangsu commented 8 months ago

This might be an android specific issue then since I'm still unable to reproduce this issue. @micahmo would you be able to do a quick test using these settings and see if you can reproduce this issue?

micahmo commented 8 months ago

Yep, I can reproduce on the latest develop on my physical device. 😕

hjiangsu commented 8 months ago

@micahmo would you able to show a recording of how it looks like? Also if possible, just send over the exported settings as well so that I can try it again!

micahmo commented 8 months ago

@hjiangsu It looks identical to this comment, and I coped the settings from this comment. I can still send you a recording / settings if you want (it would be later today), but I just copied @K4LCIFER. 😆

hjiangsu commented 8 months ago

Dang, okay that's really weird. I have no clue what could be causing that then atm. I guess I can try again and send a recording of it here to show what happens on my end

hjiangsu commented 8 months ago

Had to compress the recording because it was too large but hopefully the general behaviour should come across still

https://github.com/thunder-app/thunder/assets/30667958/a3d144dd-975d-49df-8d25-8409cbe6d675

micahmo commented 8 months ago

@hjiangsu A couple thoughts...

  1. Can you try to scroll up for longer at a time?
  2. Can you try on your Android emulator?

I wonder if this is related to our discussion in #576. If you recall, on iOS the images didn't really get cleared from cache, even when you scrolled way down. On Android, they got evicted almost immediately, causing them to reload when I scrolled back up. I wonder if, as a test, we could turn caching back on and see if that helps here.

hjiangsu commented 8 months ago

Can you try to scroll up for longer at a time?

Yup, I can do that!

Can you try on your Android emulator?

Unfortunately, I think the behaviour might be different if I try using the emulator because I can only run that on debug mode, which inherently adds a lot of stuttering (even on iOS) when I do tests on it. I can still try it, but I won't really know if the issue comes from stuttering or from the actual issue at hand

I wonder if, as a test, we could turn caching back on and see if that helps here.

We can do that as a test and see! I'll try to see if I can continue to reproduce this issue, but ultimately, it might be more of an Android-related issue (as of right now)

hjiangsu commented 8 months ago

@micahmo Heres the video with more upward scrolling

https://github.com/thunder-app/thunder/assets/30667958/4227ef89-2706-40ce-a432-8eef94d84818

micahmo commented 8 months ago

I won't really know if the issue comes from stuttering or from the actual issue at hand

I can't say how much stuttering debug mode adds on your end, but I will say this issue feels distinctly different from general stuttering / dropped frames. Sometimes the page will rescroll by up to half, for example.

Fmstrat commented 8 months ago

Same for me. And since it happens with full height images vs without, it seems unrelated to performance.

hjiangsu commented 5 months ago

Just coming back to this issue again, but is this still a problem? There was a refactor for the feed page that was done in 0.2.6 which may have solved this issue. Let me know!

K4LCIFER commented 5 months ago

I'm on 0.2.6, and it does appear to still occur. Perhaps it seems more intermittent than it was, but I could be wrong on that.