I have this wavesurfer.js waveform instance and it's beautiful and fine:
const wavesurfer = WaveSurfer.create({
container: document.querySelector(`#waveform`),
backend: 'MediaElement',
waveColor: '#525054',
progressColor: '#eb7100',
cursorColor: 'transparent',
height: 450,
fillParent: true,
minPxPerSec: 100,
hideScrollbar: true,
});
wavesurfer.load(`https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3`);.container {
width: 1536px;
height: 864px;
text-align: center;
position: relative;
left: 50%;
transform-origin: center center;
z-index: 1;
/*The line below causes the error...*/
transform: translate(-50%, -66.5px) scale(0.846065);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/2.0.4/wavesurfer.min.js" integrity="sha512-mhqErQ0f2UqnbsjgKpM96XfxVjVMnXpszEXKmnJk8467vR8h0MpiPauil8TKi5F5DldQGqNUO/XTyWbQku22LQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="container">
<div id="waveform" class="waveform"></div>
</div>Now please click on the wave, (please wait until the audio is loaded) you'll see that the point you clicked and the point where the wave detects your click is different!!!
I found out that the issue is caused by scaling of the container here:
.container {
...
z-index: 1;
/*The line below causes the error...*/
transform: translate(-50%, -66.5px) scale(0.846065);
}
How can we fix this issue?
Note 1: I didn't add a wavesurfer.js tag because this is not a library issue, this is a css issue and it may be solved by javascript or jquery too...
Note 2: I need the scaling of the container and ofcourse the values my be different ...
Here is a reproduction of the issue on codepen: https://codepen.io/pixy-dixy/pen/YzQONBY