Hover plugin conflicts with Zoom, causing blank waveform

[bernardwiesner]

Bug description

When using both the Hover plugin together with the zoom, under certain hover and zoom combinations the whole waveform becomes blank, or the width of the waveform is incorrect.

Environment

• Browser: Chrome

Minimal code snippet

const wavesurfer = WaveSurfer.create({
  container: document.body,
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  url: '/examples/audio/audio.wav',
  minPxPerSec: 100,
  dragToSeek: true,
  plugins: [
  Hover.create({
    lineColor: '#ff0000',
    lineWidth: 2,
    labelBackground: '#555',
    labelColor: '#fff',
    labelSize: '11px',
  }),
],
})

Expected result

When zooming and using the hover it should work without issues.

Obtained result

Waveform becomes blank and unusable when using both hover and zoom with certain combinations.

Screenshots

hover.zoom.bug.webm

[katspaugh]

Thanks for the report! Looks like it’s similar to #3761, I.e. related to the new virtualized rendering in 7.8.0.

[bernardwiesner]

Hi @katspaugh !

The version I am using is 7.7.15, however it also happens in 7.8.0.

[katspaugh]

Ah, good to know!

[NCal]

i have the same issue. if i use a range slider and play with zoom enough, the waveform disappears and/or displays incorrectly.

[bernardwiesner]

@NCal
For me this only happens in combination with the hover plugin.

@katspaugh
I would love to use the hover plugin together with the zoom plugin. Have you had some time to look into this issue? Curious if you have some ideas as to what might be causing it.