[BUG] - Beta 8 and newer cause lag in animations for components in `Card`

[DannyNemer]

Describe the bug

When using the Card component in Beta 8 or later, animations of components inside the card (e.g., hover with Button) experience a significant lag. Merely downgrading to Beta 7 removes the lag instantly.

Beta 8 & 9 - slow animations

https://user-images.githubusercontent.com/170023/174913771-0da76ce3-05bc-4407-b8f7-03fb85598222.mov

Beta 7 - fast animations

https://user-images.githubusercontent.com/170023/174913796-ed17fa13-b3e3-4f88-bb1a-8c263b49b98f.mov

Steps to Reproduce the Bug or Issue

1. Create a new Next.js project with the default NextUI setup.
2. Use this example _app.tsx page:

   import { Button, Card } from "@nextui-org/react";
   import type { NextPage } from "next";
   
   const Home: NextPage = () => {
     return (
       <Card>
         <Button flat>Test</Button>
         <Button flat>Test</Button>
         <Button flat>Test</Button>
         <Button flat>Test</Button>
         <Button flat>Test</Button>
         <Button flat>Test</Button>
         <Button flat>Test</Button>
         <Button flat>Test</Button>
         <Button flat>Test</Button>
         <Button flat>Test</Button>
         <Button flat>Test</Button>
         <Button flat>Test</Button>
         <Button flat>Test</Button>
         <Button flat>Test</Button>
         <Button flat>Test</Button>
       </Card>
     );
   };
   
   export default Home;
   

3. Run next dev and experience the slow hover and click animations in the browser (as shown in the first screen recording above).
4. Downgrade to NextUI beta 7:

   yarn add @nextui-org/[email protected]
   

5. Run next dev and experience the fast hover and click animations in the browser (as shown in the second screen recording above).

Expected behavior

Expected smooth animations.

Operating System Version

OS: macOS 11.6.7 Processor: 2.8 GHz Quad-Core Intel Core i7 Memory: 16 GB 1600 MHz DDR3

Browser

Tested in Chrome and Safari, but slowness is more pronounced in Safari

[cyanxiao]

Hi @DannyNemer have you tried beta9? I think the performance has been improved since then. Here's a working sample: https://codesandbox.io/s/multiple-buttons-3wevf4

[DannyNemer]

Hi @DannyNemer have you tried beta9? I think the performance has been improved since then. Here's a working sample: https://codesandbox.io/s/multiple-buttons-3wevf4

@imchell Yep, animation lag is identical in beta9 as beta8

[cyanxiao]

Ah I can reproduce it in Safari.

[ghost]

It seems this issue is coming from this style filter: var(--nextui-dropShadows-lg);

Current:

Set filter: none:

@DannyNemer If you don't need shadow, you can avoid this issue with variant="flat"

  <Card variant="flat">
    <Button flat>Test</Button>
  </Card>

To fundamentally fix it, we can choose between several options, but let's wait for the maintainer's opinion first :)

[jrgarciadev]

Hey @DannyNemer could you please share the specs of your machine?

I've tested it, on safari and chrome and it works without lag https://user-images.githubusercontent.com/30373425/177015738-934ddabe-3b3c-49cc-b1fd-0ffe065499ad.mov

@TroyTae could you share the name of the tool you used for measuring the CPU?

[ghost]

@jrgarciadev It's built-in tool of Safari (https://webkit.org/blog/8993/cpu-timeline-in-web-inspector/) You can find timelines tab in Safari Web Inspector!

[jrgarciadev]

Thanks @TroyTae 🙏🏻

[DannyNemer]

Hey @DannyNemer could you please share the specs of your machine?

I've tested it, on safari and chrome and it works without lag https://user-images.githubusercontent.com/30373425/177015738-934ddabe-3b3c-49cc-b1fd-0ffe065499ad.mov

@TroyTae could you share the name of the tool you used for measuring the CPU?

@jrgarciadev Thank you for investigating! Here are my machine's specs: OS: macOS 11.6.7 Processor: 2.8 GHz Quad-Core Intel Core i7 Memory: 16 GB 1600 MHz DDR3

[capibawa]

I was able to replicate this issue by disabling hardware acceleration on Chrome/Brave. Safari also exhibits this issue. As suggested by @TroyTae, the lag can be mitigated by disabling shadows.

[jrgarciadev]

Hey guys, could you try again using the latest version v10? I've added box shadows for safari instead of a drop-shadow filter

[SimonShiki]

Hey guys, could you try again using the latest version v10? I've added box shadows for safari instead of a drop-shadow filter

It's still laggy in Chrome but solved in Safari

[depyronick]

Persists on v10; changing the variant to flat helps.

[jrgarciadev]

Hey please update to v2.0 https://nextui.org/blog/nextui-v2 due to v1 will not receive more updates. New version is way more perfomant