Mobile Display Issue

Hey!

I just launched my site that uses blend states in Rive to transform the artboard and the contents inside it depending on browser window width. I have the canvas locked at a fixed width and heights as the Rive project adjusts itself inside the given canvas (1920x3000).

On desktop, the site is functional and responsive as intended. On mobile/tablet however, the canvas is loading, but not displaying the rive project.

Is there a potential fix for this? I have tried it using Safari on an IPhone 11 Pro and my buddy's IPad.

Any help is much appreciated. This is my first true experience with web development outside of no-code tools.

Here's the site: www.drewgib.com

The Rev:

responsive_backup.rev

5 MB

The Code:

<html>
  <head>
    <title>Drew Gibson</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
      body, html {
        margin: 0;
        padding: 0;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        overflow-x: hidden;
      }
      canvas {
        display: block;
        margin-top: 0;
        width: 1920px; /* Keep the width fixed */
        height: 3000px; /* Keep the height fixed */
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="1920" height="3000"></canvas>


    <script src="https://unpkg.com/@rive-app/canvas@2.20.0"></script>
    <script>
      const { Rive, EventType } = rive;

      let widthInput;

      const r = new Rive({
        src: "new_responsive_design.riv",
        canvas: document.getElementById("canvas"),
        autoplay: true,
        stateMachines: "Cards",
        onLoad: () => {
          r.resizeDrawingSurfaceToCanvas();

          const inputs = r.stateMachineInputs("Cards");

          widthInput = inputs.find(i => i.name === "windowWidth");

          if (widthInput) {
            widthInput.value = window.innerWidth;
            console.log(`Initial Width set to: ${widthInput.value}px`);
          }
        },
      });

      function updateWidth() {
        if (widthInput) {
          widthInput.value = window.innerWidth;
          console.log(`Width updated: ${widthInput.value}px`);
        }
      }

      window.addEventListener("resize", updateWidth); // Keep this to update Rive's windowWidth input

      function onLinkedinClick() {
        console.log("Linkedin clicked!");
        window.open("https://www.linkedin.com/in/link-drew-gibson/", "_blank");
      }

      function onEmailClick() {
        console.log("Email clicked!");
        window.location.href = "mailto:drew.gib@outlook.com";
      }

      r.on(EventType.RiveEvent, (event) => {
        const eventName = event.data.name;
        
        if (eventName === "LinkedIn") {
          onLinkedinClick();
        } else if (eventName === "Email") {
          onEmailClick();
        }
      });
    </script>
  </body>
</html>