Css animations trigger twice on pre-rendered elements in Blazor Web App

[TrieBr]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

When animating an element (eg using animate.css), the element is animated twice. Once when the element is first shown (pre-rendered), and again when it is hydrated via WebAssembly.

Turning off prerendering (@attribute [RenderModeInteractiveAuto(false)]) fixes the issue, but I want to keep prerendering enabled.

Expected Behavior

Element should not re-render (create a new DOM element) that would reset CSS animations.

Steps To Reproduce

Repro is here: https://github.com/TrieBr/BlazorHydrationBug

1. dotnet new blazor -int Auto -n HydrationBug
2. Add animate.css in Components/App.razor:

<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
    />

3. Add an animated element somewhere (I added to Counter.razor):

<div class="alert alert-success alert-dismissible animate__animated animate__fadeInDown animate__faster" role="alert">
       "This is a bug"
    </div>

Exceptions (if any)

No response

.NET Version

8.0.100-rc.2.23502.2

Anything else?

.NET SDK:
Version: 8.0.100-rc.2.23502.2
Commit: 0abacfc2b6

Runtime Environment:
OS Name: Mac OS X
OS Version: 14.0
OS Platform: Darwin
RID: osx-arm64
Base Path: /usr/local/share/dotnet/sdk/8.0.100-rc.2.23502.2/

.NET workloads installed:
There are no installed workloads to display.

Host:
Version: 8.0.0-rc.2.23479.6
Architecture: arm64
Commit: 0b25e38ad3

.NET SDKs installed:
6.0.201 [/usr/local/share/dotnet/sdk]
6.0.402 [/usr/local/share/dotnet/sdk]
6.0.404 [/usr/local/share/dotnet/sdk]
7.0.100 [/usr/local/share/dotnet/sdk]
7.0.101 [/usr/local/share/dotnet/sdk]
7.0.302 [/usr/local/share/dotnet/sdk]
8.0.100-rc.1.23463.5 [/usr/local/share/dotnet/sdk]
8.0.100-rc.2.23502.2 [/usr/local/share/dotnet/sdk]

.NET runtimes installed:
Microsoft.AspNetCore.App 6.0.3 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 6.0.10 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 6.0.12 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 7.0.0 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 7.0.1 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 7.0.5 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 8.0.0-rc.1.23421.29 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 8.0.0-rc.2.23480.2 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App]
Microsoft.NETCore.App 6.0.3 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]
Microsoft.NETCore.App 6.0.10 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]
Microsoft.NETCore.App 6.0.12 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]
Microsoft.NETCore.App 7.0.0 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]
Microsoft.NETCore.App 7.0.1 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]
Microsoft.NETCore.App 7.0.5 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]
Microsoft.NETCore.App 8.0.0-rc.1.23419.4 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]
Microsoft.NETCore.App 8.0.0-rc.2.23479.6 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]

Other architectures found:
x64 [/usr/local/share/dotnet/x64]

Environment variables:
Not set

global.json file:
Not found

Learn more:
https://aka.ms/dotnet/info

Download .NET:
https://aka.ms/dotnet/download

[javiercn]

@TrieBr thanks for contacting us.

This is likely caused by #42561. We recommend you upvote that issue instead.