Error: Invalid value for <ellipse> attribute ry="Infinity" when setting display: none; to Waveform with Envelope plugin

[thomasmol]

Bug description

I get an error/warning in my browser console Error: Invalid value for <ellipse> attribute ry="Infinity" when adding a display:none; styling to the waveform player which uses the envelope plugin. The error is shown for every x and y point in the envelope, so e.g. the minimal example below generates 6 errors.

It seems like the points get assigned new coordinates with a value of Infinity, but I can't find out why or where.

It does not break anything else though. The hiding and unhiding works fine and all points on the envelope and waveform keep working as expected.

Environment

• Browser: Safari (but in other browsers as well)
• MacOS 15
• SvelteKit 2.0

Minimal code snippet

In a Svelte component + TailwindCSS ('hidden' class adds display:none; to an element)

<script>
  import { onMount } from 'svelte';
  import WaveSurfer from 'wavesurfer.js';
  import EnvelopePlugin from 'wavesurfer.js/plugins/envelope';
  import SampleAudio from '$lib/assets/audio/test.mp3';

  let hidden = false;

  onMount(() => {
    const ws = WaveSurfer.create({
      container: '#waveform',
      url: SampleAudio
    });
    // add envelope with 3 test points
    const envelope = EnvelopePlugin.create({
      points: [
        { time: 0, volume: 0 },
        { time: 1, volume: 1 },
        { time: 2, volume: 0 }
      ]
    });
    ws.registerPlugin(envelope);
  });
</script>

<button type="button" on:click={() => (hidden = !hidden)}> Show/hide audio player </button>

<div class={hidden ? 'hidden' : ''}>
  <div id="waveform"></div>
</div>

Expected result

No errors

Obtained result

[Error] Error: Invalid value for <ellipse> attribute ry="Infinity"
	(anonymous function) (wavesurfer__js_plugins_envelope.js:156)
	forEach
	update (wavesurfer__js_plugins_envelope.js:154)
	(anonymous function) (wavesurfer__js_plugins_envelope.js:210)
	forEach
	emit (wavesurfer__js.js:53)
	(anonymous function) (wavesurfer__js.js:758)
	forEach
	emit (wavesurfer__js.js:53)
	(anonymous function) (wavesurfer__js.js:524:412)
	(anonymous function) (wavesurfer__js.js:26)
	Promise
	t (wavesurfer__js.js:5)
	reRender (wavesurfer__js.js:539)
	onContainerResize (wavesurfer__js.js:234:118)
[Error] Error: Invalid value for <ellipse> attribute rx="Infinity"
	(anonymous function) (wavesurfer__js_plugins_envelope.js:156)
	forEach
	update (wavesurfer__js_plugins_envelope.js:154)
	(anonymous function) (wavesurfer__js_plugins_envelope.js:210)
	forEach
	emit (wavesurfer__js.js:53)
	(anonymous function) (wavesurfer__js.js:758)
	forEach
	emit (wavesurfer__js.js:53)
	(anonymous function) (wavesurfer__js.js:524:412)
	(anonymous function) (wavesurfer__js.js:26)
	Promise
	t (wavesurfer__js.js:5)
	reRender (wavesurfer__js.js:539)
	onContainerResize (wavesurfer__js.js:234:118)

Screenshots