canvas height growing indefinitely while using <div> but not when using <span> (setup: bun+vite)

I cannot understand what's going on here. When I use a

the canvas height is growing indefinitely. When I use a it is not. I have a setup with bun and vite and I run the project using bunx --bun vite I have tried with firefox and edge, same behavior. I have attached a video for you to see, at the end.

Thanks for the help!

here are my files to reproduce:

index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <script type="module" src="/main2.js"></script>
</head>

<body>
  <span id="ai"></span>
</body>

</html>

my main2.js

import AudioMotionAnalyzer from "audiomotion-analyzer";
let ai = document.getElementById("ai");
if (ai) {
  const audioMotion = new AudioMotionAnalyzer(ai);
}

and my package.json

{
  "name": "neocertif",
  "private": true,
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "dev": "bunx --bun vite",
    "build": "bunx --bun vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^5.2.0"
  },
  "dependencies": {
    "@codemirror/lang-python": "^6.1.6",
    "audiomotion-analyzer": "^4.4.0",
    "codemirror": "^6.0.1",
    "prismjs": "^1.29.0"
  }
}

https://github.com/hvianna/audioMotion-analyzer/assets/8048877/11986f00-531e-482a-86ee-b74ab730bc2f

hvianna / audioMotion-analyzer

canvas height growing indefinitely while using <div> but not when using <span> (setup: bun+vite) #73