Items flickering when using multiple containers

[kxique]

My code:

export default function Test() {
  useEffect(() => {
    const container = document.querySelector(".swapy-container");
    const container2 = document.querySelector(".swapy-container2");
    const container3 = document.querySelector(".swapy-container3");

    createSwapy(container, {
      animation: "dynamic", // or spring or none
    });

    createSwapy(container2, {
      animation: "dynamic", // or spring or none
    });

    createSwapy(container3, {
      animation: "dynamic", // or spring or none
    });
  }, []);

  return (
    <div className="flex flex-col gap-16 py-32">
      <div className="swapy-container space-y-4">
        <div data-swapy-slot="foo" className="bg-red-500/20 p-4">
          <div data-swapy-item="a">
            <div className="relative flex h-full w-full items-center justify-center rounded-[10px] bg-red-400 font-bold">
              FOO
            </div>
          </div>
        </div>

        <div data-swapy-slot="bar" className="bg-red-500/20 p-4">
          <div data-swapy-item="b">
            <div className="relative flex h-full w-full items-center justify-center rounded-[10px] bg-red-400 font-bold">
              BAR
            </div>
          </div>
        </div>

        <div data-swapy-slot="baz" className="bg-red-500/20 p-4">
          <div data-swapy-item="c">
            <div className="relative flex h-full w-full items-center justify-center rounded-[10px] bg-red-400 font-bold">
              BAZ
            </div>
          </div>
        </div>
      </div>

      <div className="swapy-container2 space-y-4">
        <div data-swapy-slot="foo1" className="bg-red-500/20 p-4">
          <div data-swapy-item="a1">
            <div className="relative flex h-full w-full items-center justify-center rounded-[10px] bg-red-400 font-bold">
              FOO 1
            </div>
          </div>
        </div>

        <div data-swapy-slot="bar1" className="bg-red-500/20 p-4">
          <div data-swapy-item="b1">
            <div className="relative flex h-full w-full items-center justify-center rounded-[10px] bg-red-400 font-bold">
              BAR 1
            </div>
          </div>
        </div>

        <div data-swapy-slot="baz1" className="bg-red-500/20 p-4">
          <div data-swapy-item="c1">
            <div className="relative flex h-full w-full items-center justify-center rounded-[10px] bg-red-400 font-bold">
              BAZ 1
            </div>
          </div>
        </div>
      </div>

      <div className="swapy-container3 space-y-4">
        <div data-swapy-slot="foo2" className="bg-red-500/20 p-4">
          <div data-swapy-item="a2">
            <div className="relative flex h-full w-full items-center justify-center rounded-[10px] bg-red-400 font-bold">
              FOO 2
            </div>
          </div>
        </div>

        <div data-swapy-slot="bar2" className="bg-red-500/20 p-4">
          <div data-swapy-item="b2">
            <div className="relative flex h-full w-full items-center justify-center rounded-[10px] bg-red-400 font-bold">
              BAR 2
            </div>
          </div>
        </div>

        <div data-swapy-slot="baz2" className="bg-red-500/20 p-4">
          <div data-swapy-item="c2">
            <div className="relative flex h-full w-full items-center justify-center rounded-[10px] bg-red-400 font-bold">
              BAZ 2
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Apparently this occurs only if you scroll down/up the page

capture.mp4

[Craftzman7]

This seems to be the same as #2 which is a bug in the browser.

[TahaSh]

@kxique I used your code, but I couldn't reproduce the issue on my end. Can you please share a live demo, like on CodePen?

[TahaSh]

@Craftzman7 thanks for your reply, but this is a different issue :)

[TahaSh]

Closing this issue for now — @kxique just let me know when you have a live demo, and I'll be happy to take a look!

[kxique]

Closing this issue for now — @kxique just let me know when you have a live demo, and I'll be happy to take a look!

Hey, didn't see the previous messages, srry

I tried to run the code i send again but i realized that the issue is with some layout elements height so i rewrite the code

https://codesandbox.io/p/devbox/swapy-test-gxzjfv

[TahaSh]

@kxique Thank you for the example! I was able to reproduce the issue, and I'll fix it soon.

[TahaSh]

@kxique I've fixed it in v0.1.2. Could you please update and try?

[kxique]

Just tested it, works like a charm now, thanks for fixing it 🙂

[TahaSh]

Awesome! Thanks for testing!