Cursor oscillates in Mozilla Firefox when autoCenter is true and window.innerWidth is even

[josua]

Bug description

Hi, I found a bug in Mozilla Firefox, when autoCenter is true and width is 100% (or window.innerWidth), the cursor (when it reaches the center) oscillates between two positions, depending of the size of the window, if window.innerWith is even it oscillates, if it's odd it does not.

Environment

• Browser: Firefox

Minimal code snippet

waveSurfer = WaveSurfer.create({
container: '#waveform', // '#waveform' The container element for the waveform
width: '100%', // Full width of the container
height: 32, // Height of the waveform
splitChannels: false, // Whether to split audio channels in the waveform
normalize: false, // Whether to normalize the waveform
waveColor: '#d9dcff', // Color of the waveform
progressColor: 'gray', // Color of the progress bar
cursorColor: 'red', // Color of the playhead cursor
cursorWidth: 2, // Width of the playhead cursor
barWidth: 2, // Width of the waveform bars
barGap: 2, // Gap between waveform bars
barRadius: 0, // Corner radius of the waveform bars
barHeight: 1, // Height of the waveform bars
fillParent: true, // Whether to fill the parent container
mediaControls: false, // Disable built-in media controls
interact: true, // Enable user interaction with the waveform
dragToSeek: {
debounceTime: 10
}, // Enable dragging to seek in the waveform
hideScrollbar: true, // Hide the scrollbar
autoplay: false, // Disable autoplay
autoScroll: true, // Disable auto-scrolling
autoCenter: true, // Disable auto-centering
minPxPerSec: 25, // Zoom level
audioRate: 1, // Default playback rate
sampleRate: 8000, // Sample rate for audio processing
backend: 'MediaElement', // Use MediaElement|WebAudio backend for audio playback
plugins: [
TimelinePlugin.create({
height: 15, // Height of the timeline
style: {
fontSize: '10px', // Font size for the timeline labels
}
}),
HoverPlugin.create({
lineColor: '#ff0000', // Color of the hover line
lineWidth: 2, // Width of the hover line
labelBackground: '#555', // Background color of the hover label
labelColor: '#fff', // Text color of the hover label
labelSize: '11px', // Font size of the hover label
})
],
fetchParams: { // Fetch parameters for loading audio files
cache: 'default',
mode: 'cors',
method: 'GET',
credentials: 'same-origin',
headers: [
{ 'Range': 'bytes=0-' } // Specify byte range for partial content requests
],
redirect: 'follow',
referrer: 'client'
}
});

Expected result

Fixed cursor at center

Obtained result

Cursor oscillating

Screenshots

[josua]

I've just noticed that under the same conditions, it flikers (shakes) in chrome and edge.

[josua]

In fact it is when the waveform container width is even so i found a temporary solution:

function isEven(number) {
return number % 2 === 0;
}

function isOdd(number) {
return number % 2 !== 0;
}

handleResize() {
const gap = isEven(window.innerWidth) ? 1 : 0;
document.getElementById('waveform').style.width = window.innerWidth + gap + 'px';
}

window.addEventListener('resize', () => handleResize());

[katspaugh]

Thanks!