Audio bars when speaking will show with delay on smaller screens

[Originn]

Bug description

On full PC screen the Audio bars when speaking will show correctly at the time I speak. On smaller screens it will show with delay of few seconds.

Environment

• Browser: Chrome, Safari

Minimal code snippet

const container = document.getElementById('waveform'); if (container) { try { const wavesurfer = WaveSurfer.create({ container: '#waveform', waveColor: 'rgb(200, 0, 200)', progressColor: 'rgb(100, 0, 100)', height: 50, });

return ( <div> {listening && ( <div className={styles.waveContainer}> <div id="waveform" className={styles.soundVisual}></div>

.soundVisual {
width: 75%;
height: 56px;
position: absolute;
margin-right:30px;
}

.waveContainer {
display: flex;
justify-content: center;
position: absolute;
top: -32px;
left: 0;
right: 0;
bottom: 0;
background: #ffffff;
height: 56px;
border-radius: 0.5rem;
border-left: 2px solid #bfbfbf;
border-right: 2px solid #bfbfbf;
}

@media (max-width: 1300px) {
.soundVisual {
width: 65% !important;
}
}

@media (max-width: 1000px) {
.soundVisual {
width: 55% !important;
}
}

@media (max-width: 768px) {
.soundVisual {
width: 40% !important;
}
}

@media (max-width: 600px) {
.soundVisual {
width: 30% !important;
}
}

Expected result

To see the sound bar immediately rendered when I speak on smaller screens

Obtained result

It takes few seconds to show on smaller screens

Screenshots