Jitter on animation example - macOs Sonoma m1 Chrome Browser

[MichaelDimmitt]

Hopefully this is helpful. Should the additional info #4 animation page having a failing network request be a separate issue?

Currently Experiencing Jitter on the following examples:

https://datastar.fly.dev/examples/store_ifmissing https://datastar.fly.dev/examples/animations

See video for more detail: https://github.com/user-attachments/assets/15954aa6-b762-414d-8ecb-070aa63d0a18

The issue was found in the following environments:

1. macOs Sonoma m1 - Chrome
   • document.body.offsetHeight=3375
   • window.innerHeight=857
2. macOs Sonoma m1 - Brave

The issue was not noticeable in the following environments:

1. macOs Sonoma m1 - Safari
2. macOs Sonoma m1 - Firefox
3. Linux Ubuntu - Firefox
4. Linux Ubuntu - Chrome

When overflow-scroll behavior: none is added to body via dev tools in chrome the jitter is no longer noticeable. related link: https://stackoverflow.com/a/70423621/5283424

Additional info:

1. the htmx example does not experience jitter: https://htmx.org/examples/animations
2. The jitter on macOs Chrome - animations goes away after the first 4 scrolls to top and bottom.
3. The store_ifmissing example does not have an error in the console.
4. The Animation example currently has an error in the console with a failing network request. (see image)

Let me know if any additional info needed and I can send it over.

Cheers, Michael Dimmitt.

Current wifi speed:

Download Mbps - 236.98 | Upload Mbps - 23.27

[delaneyj]

Hey Michael, great to meet @ Utah.js. Looks like we had a bad merge. Take a look at the site now and see if at least the errors are gone.

[MichaelDimmitt]

Retested and the network error is gone.

However, the scroll behavior "jitter" is still present. Again just to note, this is on m1 macOs Sonoma Chrome Browser.

Not sure if the issue should be closed as a browser specific issue or if it points out something the framework would want to address. I will leave that up to you but I might chew on it over a weekend to learn more about how browsers work even if this issue gets closed.

If anyone thinks of links/resources that I should look at on the subject feel free to post. If I find any I will post. I am already thinking looking at the v8 c++ source code and also looking for something firefox related where the bug is not present might be something to investigate.

Also I could approach from another angle of eliminating code until the jitter goes away to find the offending code since the scroll issue is only present when this tab is active.

My hunch is that the jitter is occuring because this page has a heigher offsetHeight than the other pages. Anyway, let me know if you think this is still a good issue or if it should be closed as a browser concern. Ill take a look at it either way. And thanks reading the issue and it was great meeting you last week!

Regards, Michael Dimmitt

[delaneyj]

Happy to make edits to reduce the issue, just let me know explicitly what that change would be. Given I don't use a Mac it's kind of hard to test this on my side

[MichaelDimmitt]

sounds good, I will find the specific issue this weekend and report back the offending code.

[2a5A1Ghu1]

Happens on intel Sonoma 14.2.1 as well. Chrome Version 128.0.6613.113 as well

It also occurs on the https://data-star.dev/examples/view_transition_api page

[delaneyj]

Unfortunately I can't solve what I can't see

[MichaelDimmitt]

Ill tackle on Saturday and give a report.