Wave misaglined/broke rendering/misplaced

[Majico.714]

Hi, really thanks for the work done on this library, I have some issues in the rendering of the wave foarm, as you can see from the image, the cursor is too long (height), the base wave is correctly placed and have the right height, but the progress wave is not center aligned.

I'm not sure what's causing the issue I'm currently using a container for the rendering, I tried rendering on the body tag and works fine, when I selected a container (like a div) I see this issue.

Here a screenshot of the wave rendered in the body:

I tried height to 'auto', tried with a fixed pixel size but the issue persist.

I'm using display:flex; on the container cause without it the wave is totally misplaced:

Environment

• Browser: Chrome
• Framework: Anguar
• Version tried: 7.6, 7.7.4, 7.7.5, 7.7.6, 7.7.7, 7.8.0

Minimal code snippet

    this.wavesurfer = WaveSurfer.create({
      container: this.waveformRef.nativeElement,
      url: this.src,
      waveColor: '#888',
      progressColor: 'rgb(116, 209, 255, 0.3)',
      normalize: false,
      cursorColor: '#c2e8ff',
      cursorWidth: 8,
      hideScrollbar: true,
      height: 'auto',
      barWidth: 5,
      barGap: 6,
      barRadius: 30,
      minPxPerSec: 1,
      barHeight: 1.1,
      sampleRate: 8000,
      fillParent: true,
      dragToSeek: true,
    });

   <div class="audio-message">
        <button type="button" mat-icon-button (click)="togglePlayPause()">
            <mat-icon>
                {{ isPlaying ? 'pause' : 'play_arrow' }}
            </mat-icon>
        </button>
        <div class="audio-waveform" #waveform></div>
        <span class="timestamp">{{ currentTime }} / {{ totalTime }}</span>
    </div>

.audio-message {
    display: flex;
    align-items: center;
    background-color: var(--md-sys-color-surface-3);
    padding: 6px 12px 6px 2px;
    border-radius: .5rem;
}

.play-button {
    width: 24px;
    height: 24px;
    border: none;
    cursor: pointer;
    margin-right: 10px;
}

.audio-waveform {
    flex-grow: 1;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audio-waveform {
  div:first-of-type {
    flex-grow: 1;
  }
}

.timestamp {
    margin-left: 10px;
    font-size: 12px;
    color: #888;
}