High GPU usage of animation in nested visual tree with static effect

[nomi-san]

Describe the bug

In a nested visual tree, a child element with animation and a parent element with any static effect (such as DropShadow) will produce very high GPU usage when the animation is animating (e.g., infinite animation keyframe or custom rendering with Skia).

To Reproduce

1. Create a nested visual tree with a parent element that has a static effect (e.g., DropShadow).
2. Add a child element inside the parent element with an animation (e.g., infinite animation keyframe).

<Border Effect="dropshadow(...)">
  <Grid>
    <!-- SomeAnimation -->
  </Grid>
</Border>

Expected behavior

The GPU usage should remain at a reasonable level when the animation is running, about 4-6% without effects.

Actual Behavior

The GPU usage becomes very high when the animation is running, about 25-30%.

Avalonia version

11.2.3

OS

Windows

Additional context

Tried all rendering and composition modes, but the issue persists.

I found a solution that move the dropshadow to the same parent level as the old dropshadow. The dirty rect of animation such as rotating a circle will not affect the sibling parents.

<Grid>
  <!-- true static? -->
  <Border Effect="dropshadow(...)"/> 

  <Border>
    <Grid>
      <!-- SomeAnimation -->
    </Grid>
  </Border>
</Grid>

[nomi-san]

I got the same issue with a full view image over an infinite animation, they were overlapping even in differ visual tree.

<Grid>
  <Grid x:Name="view1">
    <!-- SomeAnimation -->
  </Grid>

  <Grid x:Name="view2">
    <!-- full view image over animation -->
    <Image Source="a-big-img" Stretch="UniformToFill" />
  </Grid>
</Grid>

In this example, we can't see the animation. When the animation is running, its dirty rect always redraws with 24% GPU usage. That becomes normal when the image is hidden.

In production, yeah I have to ensure no animation is running under the image to avoid that case.