TabViewItem header is weirdly rendered when scaling is above 100%

[zipgenius]

Describe the bug

When screen scaling is set at 125% or above (sometimes the suggested configuration for many notebooks), the TabViewItem header has 4 rounded corners and a gradient background that souldn't be there.

Steps to reproduce the bug

1. Create a new WindowsApp project;
2. In MainWindow.xaml put a TabView with a TabViewItem, then run the app;
3. Go to Start menu and open the Settings app, then go to System > Display > Scale & layout;
4. If scaling is set to 100%, elevate to anything above it (125% is good enough);
5. The TabViewItem header will transform in something weird.

Expected behavior

TabViewItem header should scale without any unexpected transformation

Screenshots

NuGet package version

No response

Windows app type

• UWP
• Win32

Device form factor

Desktop

Windows version

Insider Build (xxxxx)

Additional context

I observed this bug in Windows 11 build 22000 and Windows 11 Insider Build 22xxx.
Applying a custom style to the TabViewItem doesn't resolve.
No other workaround found.

[kmgallahan]

#6194
#6207
#6419
#6475

[zipgenius]

#6194 #6207 #6419 #6475

I thought they were all unrelated...

[zadjii-msft]

This looks awfully a lot like #6076

[StephenLPeters]

@gegao18 and @codendone FYI

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 5 days.