Centre Line "wiggles"

[Stoyvo]

When centre is true, the centre line doesn't stay perfectly centre.

To replicate (while audio is playing), zoom in to waveform, click ahead to start recenter funcrion, watch centre line. The closer you zoom, the more noticeable this becomes.

Suggestion: draw line on parent so position does not need consistent updating. When recentering is needed, use current solution.

[katspaugh]

I'm fine with the suggested solution.

Do you understand the root cause of the line jumping though? Is it some kind of graphical glitch on the canvas?

[Stoyvo]

@katspaugh I'll investigate the root cause this evening. I can mostly notice it while CPU is under a decent load.

[Stoyvo]

@katspaugh Issue is caused by the inner element, as width value is dynamically changing.

[inigoiparragirre]

Hi, I'm using wavesurfer with autocenter option set to true. I also perceive that when zooming in the application the bar goes faster and it goes to the right. Any clues how this can be solved? Must recenterOnPosition method be fixed?

Hope this can be solved, thanks! If I have time I will try to check deeper.

[dionwiggins]

We have been encountering the same issue. When zoomed in particular, the line can go off the screen completely. This makes it unusable and is more of a bug than an enhancement.

[thijstriemstra]

@dionwiggins do you have any code that shows how to reproduce the problem?

[Stoyvo]

FWIW, I "resolved" this issue outside of the library by placing a div, position:absolute; ontop of the canvas. It was a hack vs a fix

[swampthang]

Even though autoCenter set to false, when zoomed in to the end portion of the waveform and clicking to the left of center in the display and then clicking play, the waveform jumps to center around the cursor position and then scrolls until the end is reached again.

Here's my setup:

WaveSurfer.create({
    container: block.wsBox[0], // container is a jQuery obj
    waveColor: '#4286f4',
    progressColor: '#b20000',
    cursorColor: 'rgba(0,0,0,0)',
    height: 100,
    minPxPerSec: timelineFunctions.getPXS(),
    interact: false,
    fillParent: false,
    scrollParent: true,
    partialRender: true,
    pixelRatio: 2,
    autoCenter: false
  });

Is my combination of settings causing autoCenter: false to be overridden?

[entonbiba]

@Stoyvo this issue still happening?

[thijstriemstra]

this issue still happening?

No feedback, closing.

[agfline]

Hi,
I've been struggling for hours with the same issue... 'till I found out I had a * { scroll-behavior: smooth; } in my CSS that was messing with autoScroll on high zoom.
Just saying, in case you want to force wave { scroll-behavior: auto; }.
Thanks for this awesome lib btw ;)