Bug: The library is not working on mobile (or tablet) devices

[KartikChinda]

Bug Summary
The WebGL fluid enhanced library works amazingly well on desktop devices. It really is a beautiful library, thanks for making this. However, on touch devices, it doesnt seem to work. Could this have something to do with the configuration of the canvas?

Expected behavior
On moving your finger through the div, the fluid colors should appear.

Actual Behavior
On moving your finger through the div, nothing happens.

Steps to reproduce
This is the code I have written, it is pretty similar to what has been mentioned in the documents for Next.js. What I am using is Next.js, Typescript, and TailwindCSS. There's some GSAP too, but none in this component. It's parent is a client component.

import React, ( useEffect, useRef } from "react";
import WebGLFluidEnhanced from "webgl-fluid-enhanced";

const Contact = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    if (containerRef.current) {
      const simulation = new WebGLFluidEnhanced(containerRef.current);
      simulation.setConfig({
        densityDissipation: 0.5,
        velocityDissipation: 0.4,
        pressure: 0.5,
        curl: 4,
        colorPalette: ["#5D0E85", "#45056E", "#2D004E"],
        bloom: false,
        colorful: false,
      });
      simulation.start();

      return () => {
        simulation.stop();
      };
    }
  }, []);

  return (
    <section className="w-screen  h-[50vh] md:h-screen flex justify-center items-center flex-col">
      <div
        ref={containerRef}
        className="w-[90%] h-[90%]  opacity-100 relative flex flex-col justify-center items-center z-10 text-white"
      >
        <div className="absolute text-base font-semibold z-10 mb-28 text-gray-300 font-subtext-heebo">
          Some text here 
        </div>
      </div>
    </section>
  );
};

export default Contact;

[michaelbrusegard]

The issue is probably with that the div blocks pointer events. Try adding the tailwind class pointer-events-none

[KartikChinda]

That seems to break it entirely, for both the mobile and the desktop devices.

[michaelbrusegard]

You have to put it on the absolute div, not the div with the simulation

[KartikChinda]

Hey @michaelbrusegard , sorry, super busy at work, completely spaced out on this haha. I did try both, and they don't work. I also removed everything inside the div to just keep the container where the simulation is applied, but that doesn't solve it either.

[michaelbrusegard]

does it work without the absolute div?

[KartikChinda]

No, it doesn't.

[michaelbrusegard]

I am very confused, I can take a deeper look at it after exams this semester, but for the moment I advice looking at how it is setup in the playground on the documentation website. It uses Nextjs and react, and it works on mobile completely fine. Maybe the issue is something else? Is the problem related to having the canvas in just a small portion of the website and then dragging through it?

[KartikChinda]

Honestly, this is tripping me up too. I tinkered around a bit, and I found that it does work for mobile, so we can close the issue. The bug still persists though, (this is just me sharing this because I find it very curious, maybe it's easy, but I am a junior dev haha), but, the component renders perfectly, as long as it is rendered on the top of the page. If I have more components before, and then render this, then it fails to work in the intended way.