Graphical glitches and poor performance on ColorPicker under WebAssembly

[Arlodotexe]

Describe the bug

The ColorPicker component was added in #241 and recently released in 8.1-rc.

We had run into some minor issues ColorPicker on wasm before, but this was related to the Animations component (see here).

ColorPicker appears to work fine on Uwp and WinAppSDK, but has these graphical glitches on Wasm.

Steps to reproduce

1. Open toolkitlabs.dev or build and deploy locally
2. Open the colorpicker component in the browser
3. Try to use it. Observe the visual bugs.

Expected behavior

No visual bugs or choppy performance.

Screenshots

Recording.2024-03-29.115019.mp4

Code Platform

• UWP
• WinAppSDK / WinUI 3
• Web Assembly (WASM)
• Android
• iOS
• MacOS
• Linux / GTK

Windows Build Number

• Windows 10 1809 (Build 17763)
• Windows 10 1903 (Build 18362)
• Windows 10 1909 (Build 18363)
• Windows 10 2004 (Build 19041)
• Windows 10 20H2 (Build 19042)
• Windows 10 21H1 (Build 19043)
• Windows 10 21H2 (Build 19044)
• Windows 10 22H2 (Build 19045)
• Windows 11 21H2 (Build 22000)
• Other (specify)

Other Windows Build number

No response

App minimum and target SDK version

• Windows 10, version 1809 (Build 17763)
• Windows 10, version 1903 (Build 18362)
• Windows 10, version 1909 (Build 18363)
• Windows 10, version 2004 (Build 19041)
• Windows 10, version 2104 (Build 20348)
• Windows 11, version 22H2 (Build 22000)
• Other (specify)

Other SDK version

No response

Visual Studio Version

No response

Visual Studio Build Number

No response

Device form factor

No response

Additional context

No response

Help us help you

Yes, but only if others can assist.

[michael-hawker]

Thanks for testing this Arlo, do we think it's related to the number of calls the component makes as the user drags their mouse or something some potential bottleneck in Uno/WASM?

[michael-hawker]

On my devbox I'm not noticing any perf issues (though it's new), but I did see the flickering.

I also see the grid missing always:

And the bars that display here didn't appear the first time I opened that segment: