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?