Wave misaglined/broke rendering/misplaced

[FossaMalaEnt]

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;
}

[katspaugh]

Try replacing height: 'auto' with an actual height in pixels, e.g. height: 200. Auto hight works well only if your container has a fixed height.

[FossaMalaEnt]

Hi, maybe I expressed myself badly, but as I said in the initial post, I've already tried whit a fixed height in pixel and the error persist, the container .audio-waveform already have a fixed height as you can see from the CSS, I also tried putting a fixed height on the container of the container (.audio-message) but the result doesn't change, I cannot understand why, there is some more information I can provide in order to better understand the bug?

[FossaMalaEnt]

I also tried fixed width instead of flex-grow: 1 on the container and in the options of wavesurfer, but nothings changed about the wrong placement and misalignement.

[FossaMalaEnt]

I had to manually align each element using this CSS and setting the height of the options in WaveSurfer.create to 32px:

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

  ::part(scroll) {
    height: 42px;
    margin-top: -48px;
  }
  ::part(wrapper) {
    height: 32px;
    margin-top: -42px;
  }
  ::part(progress) {
    height: 32px;
    top: 24px;
  }
  ::part(cursor) {
    height: 28px;
    width: 28px;
    top: calc(50% + 10px);
    border-radius: 50%;
  }
}

In order to workaround the issue:

I see the issue was converted as a discussion, but I still consider this as a issue as all the rendering is misplaced and broken and there is no documentation on how to avoid this from happening, I tried for almost 3 hours searching what was wrong with the parent element but I didn't find a way to make it work, only this workaround that you can understand it's not a good solution

[katspaugh]

Ah sorry I missed that you already tried a fixed height.

I converted it to a discussion because I’m not convinced it’s a bug. Can you create an isolated example demonstrating the issue?