Not all CSS cursor properties are functional

Brosinski commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

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

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

KieranDevvs commented 1 year ago

grab and grabbing also dont work.

bitbound commented 1 year ago

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 commented 1 year ago

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 commented 11 months ago

Experiencing the same on Blazor Hybrid as @bitbound

mtvedten commented 8 months ago

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 commented 8 months ago

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 commented 2 months ago

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

MicrosoftEdge / WebView2Feedback

Not all CSS cursor properties are functional #2766