Mobile centering issue

[taoeffect]

Problem

On Android Brave, when loading https://groupincome.org for the first time, the centering is off:

Refreshing the page fixes it.

Solution

I'm not sure. I think this is related to some of the container resize logic, and possilby animation (#171).

[SebinSong]

@taoeffect
To me, it's highly suspicious below change is the cause of the issue.

Because client:only directive, unlike client:load, does not render the UI on the server side and make it 100% client's job. And I had to make this change to fix below build error caused from importing plyr library.

But due to having another child component that uses a third-party library, the job has become heavier and slower now and the delay caused from this leads to this sudden UI restructuring / jump in the scroll position.

Let me try and figure out if there is a way to fix the issue above without using client:only directive.

[taoeffect]

Ok, but FYI I think I saw this happen before too…

I'd definitely test with BrowserStack with ngrok tunnel to verify any fix works well on Android

[SebinSong]

@taoeffect FYI, I don't see that off-centering issue on my Android browsers (Chrome, Samsung Internet). I only observe the <= 2-3 seconds of delay between rendering HomeAnimation.vue and other UIs (eg. Footer, Top navigation toolbar etc, and this delay becomes shorter after the first-time loading, probably because the assets are cached on the browser). So I just assumed these are different symptoms caused by the same issue.

[taoeffect]

Possibly. I was just able to reproduce again and noticed that after a delay it fixed itself

[SebinSong]

OK, then I feel making rendering/initialization plyr UI less slow would be the key to improve this behavior.

[taoeffect]

But note groupincome.org isn't currently using Plyr...

[SebinSong]

Right.... Then It's safe to push client:load change right now. (Let me send a quick PR)
Meanwhile we can figure out the way to use plyr without putting client:only directive.

[taoeffect]

Just making a note here now that #174 has been merged that this did indeed fix the issue EDIT: no it hasn't. Leaving issue open until Plyr issue addressed as well per Slack convo.

[taoeffect]

@SebinSong FYI this bug still exists. It's actually if I scroll the page that it fixes itself. And it seems unpredictable in terms of how to reproduce.

[taoeffect]

Tested again after #177 was merged and am still able to reproduce. Not on first load, but when tapping the URL bar in Brave mobile and tapping the URL. This is interesting as it means gsap wasn't to blame as that's been removed AFAICT.

I guess we can leave as-is for now, as there are higher priority items, so I'll remove the high-priority label, but still would be nice to have this fixed, it's just hard to reproduce.