Not all CSS cursor properties are functional

[Brosinski]

Description When loading web componenets within webview2 the cursor css property does not work for every supported cursor Assigning certain cursor properties results in no changes being made to the cursor for said element.

The following I tried to use that don't work are:

cursor : col-resize cursor : move cursor : cell cursor : alias

There are many more. Cursor functionality is there, just not fully fleshed out as pointer, ew-resize ,auto, and s-resize are all functional, there may be more that work, but i haven't gone and tried all of them

Version SDK: WebView2 .NET core 6 Framework: .NET MAUI Blazor OS: WIN10

Repro Steps

Create a new Blazor Maui project with Visual Studio 2022 or serve something through a webview2 component

Try style any element with the cursor property set to cell or col-resize

Hover your mouse over the property, and it should only display a default cursor

Additional context This was discovered through the use of Blazor Maui which seems to utilize WebView2

[jamesoli]

@Brosinski I am taking a look at this issue and just wanted to ask what you meant about loading a "webview with webview2 in XAML" in this issue: https://github.com/dotnet/maui/issues/9960. I am trying to get multiple repros of the issue and I'd like to do that one as well.

[Brosinski]

@jamesoli Sorry for the late response

I was speaking in relation to running a WebView element in a .net MAUI app with XAML, using the Microsoft.Web.WebView2 package. When loading any HTML elements with styled cursors in the WebView you should be able to replicate the issue.

[jamesoli]

@Brosinski Hey, thanks for the info. It seems like we (WebView2) use slightly different cursors than default windows cursors and that isn't getting propagated properly to the end user. We are still looking into it internally and will keep you updated.

[Brosinski]

Glad to hear you have an idea of what's going on.

Thanks for the feedback, excited to hear back from you.

[KieranDevvs]

grab and grabbing also dont work.

[bitbound]

I'm also experiencing this in a new MAUI Blazor app. I want to style an element with "crosshair" cursor, or load one from base64 (e.g. cursor: url('data:image/png;base64, {base64-encoded-image}')), but neither are working. It just shows the default cursor.

[Take-A-Byte]

I have created a new bug regarding this @lucent-sea - https://github.com/MicrosoftEdge/WebView2Feedback/issues/3388. Feel free to add more information to it 👍

[orosbogdan]

Experiencing the same on Blazor Hybrid as @bitbound

[mtvedten]

Any updates on this? I am trying to hide the cursor in kiosk type application for touchscreens on Windows and Android using .NET MAUI. Ideally I would hide the mouse cursor from the maui application. But I could not do that, So i tried from the hosted HTML plage with CSS "cursor: none", but that did not work either. It works in edge, but not in Webview2.

I see this issue is two years old, but is still not resolved?

[Eilon]

I just checked in WebView2 in WinUI to test the status of various CSS cursors. The situation is that a lof of them don't work, even though pretty much all of them work in the regular Edge browser.

• N/A: auto/default - not very meaningful to test
• Working: pointer, wait, text, n-resize, e-resize, s-resize, w-resize, ns-resize, ew-resize, ne-resize, nw-resize, se-resize, sw-resize, nesw-resize, nwse-resize
• Not working: none, context-menu, help, progress, cell, crosshair, vertical-text, alias, copy, move, no-drop, not-allowed, all-scroll, col-resize, row-resize

Here's the HTML I used to test (it's a bit verbose, but that's to make it self-contained):

<div style="cursor: auto; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">auto</div>
<div style="cursor: default; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">default</div>
<div style="cursor: none; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">none</div>
<div style="cursor: context-menu; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">context-menu</div>
<div style="cursor: help; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">help</div>
<div style="cursor: pointer; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">pointer</div>
<div style="cursor: progress; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">progress</div>
<div style="cursor: wait; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">wait</div>
<div style="cursor: cell; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">cell</div>
<div style="cursor: crosshair; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">crosshair</div>
<div style="cursor: text; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">text</div>
<div style="cursor: vertical-text; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">vertical-text</div>
<div style="cursor: alias; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">alias</div>
<div style="cursor: copy; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">copy</div>
<div style="cursor: move; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">move</div>
<div style="cursor: no-drop; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">no-drop</div>
<div style="cursor: not-allowed; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">not-allowed</div>
<div style="cursor: all-scroll; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">all-scroll</div>
<div style="cursor: col-resize; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">col-resize</div>
<div style="cursor: row-resize; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">row-resize</div>
<div style="cursor: n-resize; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">n-resize</div>
<div style="cursor: s-resize; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">s-resize</div>
<div style="cursor: e-resize; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">e-resize</div>
<div style="cursor: w-resize; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">w-resize</div>
<div style="cursor: ns-resize; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">ns-resize</div>
<div style="cursor: ew-resize; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">ew-resize</div>
<div style="cursor: ne-resize; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">ne-resize</div>
<div style="cursor: nw-resize; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">nw-resize</div>
<div style="cursor: se-resize; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">se-resize</div>
<div style="cursor: sw-resize; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">sw-resize</div>
<div style="cursor: nesw-resize; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">nesw-resize</div>
<div style="cursor: nwse-resize; width: 75px; height: 75px; background-color: lightgray; border: 1px solid darkgray; padding: 10px; float:left">nwse-resize</div>

[ChaseIngersol]

Running into this same issue 2 years later... any updates?

[mpnow]

I'm just running into this bug 3 years later - is there any plan to fix this? Thanks!