Gradients height scaling incorrect on mobile browser setting

[mofalkmusic]

Description

When setting a custom gradient on options.waveColor or options.progressColor, the height specified in the gradient is not properly displayed on mobile browser env. I did test setting to mobile in dev tools and on actual chrome mobile, the issue is the same on both.

Code

Taken from the examples:

import WaveSurfer from 'wavesurfer.js'

const ctx = document.createElement('canvas').getContext('2d')
const gradient = ctx.createLinearGradient(0, 0, 0, 128)
gradient.addColorStop(0, 'rgb(200, 0, 200)')
gradient.addColorStop(0.5, 'rgb(100, 0, 100)')
gradient.addColorStop(0.5, 'rgb(0, 0, 0)') // Setting the color change at exactly 50%
gradient.addColorStop(1, 'rgb(0, 0, 0)')

WaveSurfer.create({
  container: document.body,
  waveColor: gradient,
  progressColor: 'rgba(0, 0, 100, 0.5)',
  url: '/examples/audio/audio.wav',
})

Expected result

No matter which browser, the gradient renders the gradient at the size/height it's set to.

Obtained result

On mobile setting, the gradient seems to have *0.5 the height it is expexted to have. Setting the height to x2 the height of the instance fixes the issue on mobile, but then the gradient is ofc double the size on regular chrome :D
ctx.createLinearGradient(0, 0, 0, 128 * 2) for example

Environment

• Browser: Chrome on PC + Chrome Mobile

Screenshots

This is my first issue ever, I hope I am not mistaken here.
Only trying to figure this out.
Best, Mo