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.