Wavesurfer.js: I am getting a gap between the cursor and my mouse position in waveform.how to coincide both postion.

[gocubetech]

[thijstriemstra]

can you add a screenshot? what does the wavesurfer.js config look like?

[gocubetech]

There is a gap between cursor and mouse cursor .I have just added cursorPlugin while wavesurfer create.

 this.wavesurfer = WaveSurfer.create({
      barWidth: 3,
      cursorWidth: 3,
      container: '#waveform',
      backend: 'MediaElement',
      progressColor: '#4a74a5 ',
      responsive: true,
      waveColor: '#00bcd4',
      cursorColor: '#36E8C5',
      scrollParent: true,
      normalize: true,
      height: 250,
      responsive: true,
      skipLength: 5,
      interaction:true,
      plugins: [
        TimelinePlugin.create({
          container: "#wave-timeline",
          formatTimeCallback: this.formatTimeCallback,
          timeInterval: this.timeInterval,
          primaryLabelInterval: this.primaryLabelInterval,
          secondaryLabelInterval: this.secondaryLabelInterval,
          primaryColor: 'blue',
          secondaryColor: 'red',
          primaryFontColor: 'blue',
          secondaryFontColor: 'red',
          fontFamily: 'cursive',
          fontSize: 12
        }),
        CursorPlugin.create({
          showTime: true,
          opacity: 1,
          customShowTimeStyle: {
              'background-color': '#000',
              color: '#fff',
              padding: '2px',
              'font-size': '10px'
          }

        }),
     ]
    });

[thijstriemstra]

try changing the cursorWidth and responsive options.

[gocubetech]

I have changed the cursorwidth,its only increasing the progress cursor width but not reducing the gap between two.Making Responsive true also has not affected the gap.

I am getting this issue in chrome and opera.In mozilla its fine

[aburai]

i can not reproduce this, maybe you can create code to test
A Code pen or test github repository

[kavishatalsania]

I've also faced this issue. I am able to solve it with some CSS changes. Try to give position: relative; CSS to your wavesurfer container and remove margins.

[aburai]

i think we should add this to the FAQ, position: relative is very important for wavesurfer to work

[ITachiLab]

Setting position: relative; on the WaveSurfer container element also helped me with the identical issue.

[thijstriemstra]

does this also happen with the cursor example on the site? if so it should be added there as well.

[ITachiLab]

From what I see, the WaveSurfer's container on the "Cursor example" page has this CSS property already set. If it's removed, the cursor doesn't work properly.

[thijstriemstra]

found a fix, closing the ticket.