Reactivity not working on safari v12.5.7 #11869

Open cocoliliace opened 3 months ago

Describe the bug

(re-opening of https://github.com/sveltejs/learn.svelte.dev/issues/602 because it was misunderstood and incorrectly transferred to sveltejs/learn.svelte.dev).

Variables do not update and no reactivity-related feature works, on ios safari with software version 12.5.7.

By not working I mean nothing changes when the variables are supposed to update.

Here is a screen recording of the behaviour on ipod. The button flashing is when I clicked on the button:

<script>
    let count = 0;

    function increment() {
        count += 1;
    }
</script>

<button on:click={increment}>
    Clicked {count}
    {count === 1 ? 'time' : 'times'}
</button>

https://github.com/sveltejs/learn.svelte.dev/assets/38874004/6dff26ce-2403-43a7-b28d-8149b41ced65

Reproduction

https://git.sr.ht/~liliace/reactive-example

This is a skeleton project from running pnpm create svelte@latest and copying the code from https://learn.svelte.dev/tutorial/reactive-assignments into src/routes/+page.svelte.

I believe it is an issue with the reactivty part and not the on:click (or at least not just on:click) because using a setInterval to update the variable also works on firefox but not on safari. My other projects using other reactivity code like input binding also have the same issue.

This report is mean for svelte and not learn.svelte.dev. I am just using the code on learn.svelte.dev to reproduce this to show that the bug exists on official code examples.

Logs

Unfortunately there are no error logs on mobile safari

System Info

Unfortunately cannot run this on ipod. Below is the system info hosting the local dev server:

  System:
    OS: Linux 6.8 Alpine Linux
    CPU: (12) x64 13th Gen Intel(R) Core(TM) i7-1355U
    Memory: 10.69 GB / 15.31 GB
    Container: Yes
    Shell: 5.2.26 - /bin/bash
  Binaries:
    Node: 21.7.2 - /usr/bin/node
    npm: 10.5.1 - /usr/bin/npm
    pnpm: 8.15.6 - /usr/bin/pnpm
  npmPackages:
    svelte: ^4.2.7 => 4.2.12 (tried 5.0.0-next.1 and failed too)

It is a gen 6 ipod, with software version 12.5.7, running safari.

Severity

blocking all usage of svelte

This may be difficult to reproduce and work on due to the hardware requirement. Although I probably can't contribute much on the code because of my lack of understanding of the internal code and browser differences, I can help test different changes and report the behaviour if anyone has some guesses or starting directions.

Probably duplicate of https://github.com/sveltejs/svelte/issues/10438

I believe this is a different issue. Contrary to #10438,

the error I am reporting does not cause the page to be blank. The page still renders but is just unreactive.
this exists on svelte 4 and 5, not just 5.
this works on ios 15.0. It is the older versions that break.

I seem to be having the same problem. When a user selects a date in the checkout of my website it is updated and displays correctly on every browser except Safari.

sveltejs / svelte