WPF animation stutters from time to time, while html in webview2 does not, I'm so confused

[Paper-Folding]

Hello, everyone, hello dear developers here.
I'm developing a marquee animation with WPF:
I come up with this simple xaml code that performs the marquee animation on a textblock back and forth:

        <Canvas
            ClipToBounds="True"
            Background="AliceBlue"
            Width="750"
            Height="150">
            <TextBlock
                FontSize="70"
                TextAlignment="Center"
                VerticalAlignment="Center"
                Text="The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog." RenderTransformOrigin="0.5,0.5">
                <TextBlock.Resources>
                    <Style TargetType="TextBlock">
                        <Setter Property="RenderTransform">
                            <Setter.Value>
                                <TranslateTransform X="0" />
                            </Setter.Value>
                        </Setter>
                        <Style.Triggers>
                            <EventTrigger RoutedEvent="TextBlock.Loaded">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)"
                                            AutoReverse="True"
                                            RepeatBehavior="Forever"
                                            From="0"
                                            To="-3000"
                                            Duration="0:0:12" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </Style.Triggers>
                    </Style>
                </TextBlock.Resources>
            </TextBlock>
        </Canvas>

However, I found the animation sometimes stutter, not looking smooth, it visually feels like some frames are being skipped from time to time.

Then I try to implement the same animation in html in webview2:

The html code in jsx(I'm using react.js):

import "./App.scss";

export default function App() {
    return (
        <div
            style={{
                width: "750px",
                height: "150px",
            }}
        >
            <div className="animation-stage">
                <p>
                    The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
                    brown fox jumps over the lazy dog.
                </p>
            </div>
        </div>
    );
}

App.scss:

.animation-stage {
    overflow: hidden;
    height: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: aliceblue;

    > p {
        font-size: 4.5em;
        white-space: nowrap;
        position: relative;
        will-change: transform;
        animation-name: marquee;
        animation-duration: 24s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
}

@keyframes marquee {
    0% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(-3000px);
    }

    100% {
        transform: translateX(0px);
    }
}

The webview2 code is very simple, I just reference the react.js dev server as startup url:

<wv2:WebView2 Grid.Row="1" Source="http://localhost:5173" />

And then I got very very smooth marquee animation in webview2.

I do hope WPF animation could be as smooth as the one in webview2, I have tried Bitmap Cache:

   <TextBlock.CacheMode>
        <BitmapCache EnableClearType="True" RenderAtScale="1" />
    </TextBlock.CacheMode>

I also tried disabling UseLayoutRounding:

<TextBlock UseLayoutRounding="False" ... />

But all these methods did not work. Just I'd like to ask if anyone knows how to get rid of the stutter in WPF animation?

Also I'm confused, of course I can migrate my code to use webview2, but is it considered the best practice?

[Paper-Folding]

Similar question on stackoverflow: https://stackoverflow.com/q/3002271/14963554

[Paper-Folding]

net8.0-windows.zip
source_code.zip (To build the app, you need to install node.js, then run yarn install and yarn build under "css-marquee" directory, and copy built directory "web" to the WPF application's outdir manually)

This sample app I built compared the WPF native animation with webview2 animation, the up is WPF animation, down is webview2 animation, you can clearly see the stuttering in WPF animation, while the webview2 one is super smooth.

[Paper-Folding]

@NkvXness I saw your reply from email github sends me, and really thank you for your reply, I have uploaded sample project above, which re-produced the issue: it compares between WPF animation and the webview2 one, you can checkout the code and experiment with it freely.

[NkvXness]

I ran the sample locally, and on my machine, the WebView2 version is clearly smoother than the native WPF version.

I tried a few WPF-side changes. The best result I got was not with Storyboard, but by driving the WPF marquee manually from CompositionTarget.Rendering. That made the WPF version a lot smoother, although it still did not remove the stutter completely.

One other thing that helped on my laptop was assigning the sample .exe to the high-performance GPU in Windows Graphics Settings. After that, the WPF version got much closer to the WebView2 version, but I could still catch occasional small stutters.

A few other things I tried:

• Timeline.DesiredFrameRate="144" on the root Storyboard helped a little, but not as much as CompositionTarget.Rendering
• DesiredFrameRate="72" and "60" were worse for me
• forcing WPF software rendering made things worse
• DwmFlush() did not noticeably help
• replacing the moving TextBlock with a simple Rectangle still showed occasional stutter

I also logged frame gaps from CompositionTarget.Rendering. At 144 Hz, the expected interval is about 6.94 ms, but I occasionally saw gaps such as 20.83 ms, 27.78 ms, and 34.72 ms. Most of those did not line up with managed GC activity, so GC does not look like the main cause in my test.

At this point I’m leaning toward this being more of a WPF frame pacing / presentation timing issue, possibly affected by GPU selection, rather than a pure text rendering problem.

For the pure WPF version, the best workaround I found so far is still: CompositionTarget.Rendering + assigning the process to the high-performance GPU in Windows Graphics Settings. That improves the WPF version a lot on my machine, but it still does not fully match the WebView2 version.

This is only based on my machine, of course, but I hope it helps narrow the issue down a bit.

[DisillusionedDeveloper]

FWIW: I also played around with your code and tried a few "tricks". I removed the TranslateTransform within the animation and simply moved the TextBlock directly on the Cavas' X-axis. I tried using KeyFrames. I also went from using a Textblock to a custom UIElement where I drew the text via FormattedText in OnRender all by myself.

Long story short: Unfortunately nothing seemed to make any difference on my machine regarding the stutter. I suspect this to be a problem buried somewhere deep in WPF's Storyboard-Animation logic. I wish I were able to contribute something more helpful.

Best wishes from Germany.

[Paper-Folding]

Yeah, really weird, such a simple animation should not stutter at all!