Audio Element Bindings Working Unreliably in Firefox

[qstearns]

Describe the bug
When (1) Server-side rendering and (2) Browsing in firefox, Svelte fails to set bindings for values that are initialized to a value on page reload.

For instance, with code like

<audio ... bind:duration={myDuration} />

if myDuration is initialized to 0, then it will remain zero indefinitely.

Logs
N/A

To Reproduce

A repo reproducing this issue is here: https://github.com/qstearns/audio-event-repro

I used sapper to get SSR to work easily, but I suspect this is a svelte issue.

To run follow the readme or:

1. npm i && npm run dev
2. Navigate to localhost:3000 in Firefox
3. Reload the page and observe the value is set to 0.

Expected behavior
I expected the value to be set to the value of the audio clip.

Stacktraces

N/A

Information about your Svelte project:

• Your browser and the version: Firefox 79.0

• Your operating system: Manjaro Linux 20.1

• Svelte version: 3.17.3

• Rollup

Severity
This bug is just annoying because I can always initialize my values to undefined and adjust my application code, but a fix would make me happy.

Additional context

May be related to #3524, which I have also noticed a regression on.

[dmorganb]

Hi, I tried to reproduce the issue in the magnificent REPL (with svelte 3.17.3) but I couldn't:
sample
I used Firefox 80 though. Does the issue happens in that REPL sample?

[qstearns]

Hey! Thanks for having a look. Unfortunately, I believe this issue only occurs when Svelte is mounting a DOM from an SSR render, so I can't reliably reproduce in the REPL. I couldn't figure out a way to convince the REPL to hydrate before page load, but if that's possible I bet you could reproduce there.

[jasonlyu123]

I tried to log the duration of the audio element using an action

<script>
	const action = (audio) => {
		console.log(audio.duration)
	}
</script>
<audio use:action>

it behaves differently on firefox and chrome. firefox always logs the actual duration on reload while chrome would log NaN.
It seems like firefox already loads the source of the audio element before hydration and before attaching the event handler for watch duration value.

[jasonlyu123]

svelte/src/compiler/compile/render_dom/wrappers/Element/index.ts

Line 619 in c752ed3

b`if (${some_initial_state_is_undefined}) @add_render_callback(${callback});`

I'm guessing it has something to do with the line. it would not check the value if the variable is already initialized. Maybe because these binding are readonly.

On Chrome, it's not an issue because the audio would be loaded after hydration, so event handler would update the value. Firefox won't load the audio source again after page reload. so it got stuck with the initial value.

[qstearns]

That definitely checks out - I'm guessing that changing these undefined checks would potentially have some pretty undesirable consequences, so I might be out of luck. FWIW, I think the regression on #3524 is probably the bigger issue here

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[aradalvand]

I don't think it's a good idea to close issues that represent serious problems that exist in Svelte just because nobody has commented on them for a while.

[qstearns]

@AradAral are you experiencing this issue? Or the one from #3524? I'm having a hard time reproducing at this point, so it's possible that it's been fixed since the issue went stale.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[lc-guy]

Still getting this issue, fwiw, in the latest Firefox (using https://github.com/Linkcube/svelte-audio-controls). Initial page refresh does not actually set the duration parameter, despite the audio element loading correctly.

[Sanqui]

I'm also running into an issue with the audio duration loading quite unreliably. The value is present on the tag but the Svelte binding doesn't update. I'm seeing this in both Firefox and Chromium. I'm using code lifted from https://learn.svelte.dev/tutorial/media-elements.