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.

[MichaelDimmitt]

@delaneyj ,

I am having issues reproducing the issue locally using the same browser. What I have noticed is the following ... see screenshot.

There is a property ::view-transition

Issue:

The scroll "jitter" issue occurs when ::view-transition is present and the user is in the process of scrolling.

I think that is related to https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition

The issue is present in the following situations:

1. macOs Sonoma m1 - Chrome, url: https://datastar.fly.dev/examples/animations
2. macOs Sonoma m1 - Brave, url: https://datastar.fly.dev/examples/animations

The issue is not present in the following situations:

1. macOs Sonoma m1 - Chrome, url: http://localhost:8080/examples/animations
2. any other browser with url: http://localhost:8080/examples/animations
3. macOs Sonoma m1 - Firefox, url: https://datastar.fly.dev/examples/animations

I will investigate further but just wanted to share what I discovered so far.

[MichaelDimmitt]

Is there a way to run the prod build locally?

datastar/Taskfile.yml

 hot:
    desc: Server hot reload
    dir: backends/go
    env:
      ENV: dev

my guess is downloading the fly cli and running --local-only

https://fly.io/docs/flyctl/deploy/

[delaneyj]

task -w

On Sat, Sep 21, 2024, 5:03 PM MichaelDimmitt @.***> wrote:

Is there a way to run the prod build locally?

datastar/Taskfile.yml

hot: desc: Server hot reload dir: backends/go env: ENV: dev

— Reply to this email directly, view it on GitHub https://github.com/delaneyj/datastar/issues/138#issuecomment-2365368555, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADK73BQYUBEPGRSIQZEFKDZXYCNVAVCNFSM6AAAAABOJGHE5OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNRVGM3DQNJVGU . You are receiving this because you were mentioned.Message ID: @.***>

[MichaelDimmitt]

I was able to reproduce locally... 🎉

the issue on localhost was that I was not running the inspector! previously I was just running:

task -w hot

the ::view-transition is now showing after running these commands in separate terminals:

task -w hot
task -w inspector

[MichaelDimmitt]

http://localhost:8080/examples/store_ifmissing http://localhost:8080/examples/title_update_backend http://localhost:8080/examples/redirects - only after you trigger the countdown. http://localhost:8080/examples/progress_bar - while the animation is running. http://localhost:8080/examples/infinite_scroll - when you are scrolling down and it needs to load more.

http://localhost:8080/examples/dbmon - has a separate issue where the cursor stops working and I cannot change the slider.

all the other examples trigger ::view-transition on an onclick event so you are usually not scrolling at the same time. (atleast with a scroll pad)

Can the app be run without the inspector When the inspector fails a lot of the demos do not show they just show the text Demo in their place.

[MichaelDimmitt]

I found out how to remove it so that it did not give an error in the terminal.

It seems inspector is not for debugging but a crucial part of the codebase. So I will try to find out why it is triggering ::view-transition in chrome but not in other browsers.

Maybe this is browser specific but I will try to find out if anything can be done on inspector. I was looking at this pr as a starting place of files to look at: https://github.com/delaneyj/datastar/pull/127/files

[delaneyj]

Can the app be run without the inspector When the inspector fails a lot of the demos do not show they just show the text Demo in their place.

in the shared.templ comment out the inspector import and uncomment the datastar import

[delaneyj]

Anything actionable here we can do or close?

[MichaelDimmitt]

I would just close for now, could not find anything actionable. When I commented those lines you mention the example will not work.

Seemed to be browser specific. Could not find offending code causing it on datastar side.