Bug 280755 – geforcenow.com: [macOS & iPadOS] The wrong values for are reported for the `MouseEvent.button`& 'MouseEvent.which' property for extra mouse buttons.

• Status: RESOLVED
• Resolution: FIXED
• Component: UI Events

[Jeffrey Blanz]

Created attachment 472765 [details]
Video of Difference with Chrome vs Safari

When using a mouse that has extra buttons, safari does not recognize the other buttons as anything other than the middle mouse button.

You can see this happening with Geforce Now. With Chrome, when you press the 5th mouse button, Chrome correctly recognizes the 5th mouse button. With Safari, when you press the 5th mouse button, Safari thinks the button you are pressing is the middle mouse button.

[Radar WebKit Bug Importer]

<rdar://problem/137592588>

[Abrar Rahman Protyasha]

Hi Jeffrey, thanks for filing the issue. Asking a clarification question: I suppose what you really want to report is that the `MouseEvent.button` property is incorrect when clicking the 5th button?

[Abrar Rahman Protyasha]

Interestingly, we get this right for the `MouseEvent.buttons` property! (as tested on https://unixpapa.com/js/testmouse.html)

[Abrar Rahman Protyasha]

At any rate, this bug is a result of our inability to respect `NSEvent.buttonNumber` when creating platform event representations from NSEvent.

[Jeffrey Blanz]

(In reply to Abrar Rahman Protyasha from comment #2)
> Hi Jeffrey, thanks for filing the issue. Asking a clarification question: I
> suppose what you really want to report is that the `MouseEvent.button`
> property is incorrect when clicking the 5th button?

Yes, and not just the 5th mouse button, but any mouse button besides Right Click, Left Click, and the middle mouse button.

[Jeffrey Blanz]

But as you stated before, I think the mouseevent.buttons property works, but it is a different property that geforce now uses that does not.

[Jeffrey Blanz]

(In reply to Abrar Rahman Protyasha from comment #3)
> Interestingly, we get this right for the `MouseEvent.buttons` property! (as
> tested on https://unixpapa.com/js/testmouse.html)

Actually I do not get it correct when using this website in safari vs chrome.

When using a mouse that has a 4th or 5th button I click it and get this for safari:
mousedown   which=2 button=1 buttons=16
mouseup     which=2 button=1 buttons=0

I get this for the same button on chrome:
mousedown   which=5 button=4 buttons=16
mouseup     which=5 button=4 buttons=0


Notice how the "buttons" are the same (16), but the "button" (4 vs 1) is not.

[Abrar Rahman Protyasha]

That's exactly right, we report wrong values for `MouseEvent.button`.

[Jeffrey Blanz]

And GeForce Now uses that property to assign buttons. So this would need to be fixed to fix the issue.

[Jeffrey Blanz]

Using this demo these are all the errors for macOS, iOS, iPadOS, and visionOS https://unixpapa.com/js/testmouse.html :

I a testing this on safari for all platforms, including STP and Chrome Canary as a comparison. I am using the M720 Triathlon mouse by Logitech which has two extra mouse buttons on the side.
____________________________________________________________________
On macOS the wrong values are reported for the which and button property for extra  Mouse Buttons:

Extra Mouse button 1 on Safari for macOS :

mousedown   which=2* button=1* buttons=8
mouseup     which=2* button=1* buttons=0

What Extra Mouse button 1 should be:

mousedown   which=4 button=3 buttons=8
mouseup     which=4 button=3 buttons=0

Extra Mouse button 2 on Safari for macOS:

mousedown   which=2* button=1* buttons=16
mouseup     which=2* button=1* buttons=0

What Extra Mouse button 2 button should be:

mousedown   which=5 button=4 buttons=16
mouseup     which=5 button=4 buttons=0
____________________________________________________________________

On iOS, iPadOS, and visionOS the wrong values are reported for the which, button, and buttons properties for all mouse buttons besides the right or left click:

Middle Mouse Button & all Extra Mouse Buttons:

mousedown   which=1* button=0* buttons=1*
mouseup     which=1* button=0* buttons=0
click       which=1* button=0 buttons=0

Middle Mouse should be:

mousedown   which=2 button=1 buttons=4
mouseup     which=2 button=1 buttons=0

Extra Mouse button 1 should be:

mousedown   which=4 button=3 buttons=8
mouseup     which=4 button=3 buttons=0

Extra Mouse button 2 button should be:

mousedown   which=5 button=4 buttons=16
mouseup     which=5 button=4 buttons=0

________________________________________________________________________
On iOS, not iPadOS, the incorrect 'buttons' is reported for a right click as well as the others above:

mousedown   which=1 button=0 buttons=0*
mouseup     which=1 button=0 buttons=0
click       which=1 button=0 buttons=0

Should look Like: 

mousedown   which=1 button=0 buttons=1
mouseup     which=1 button=0 buttons=0
click       which=1 button=0 buttons=0

_________________________________________________________________________
* wrong values

[Abrar Rahman Protyasha]

Hi Jeffrey! Thanks a lot for looking into this. I'll use this bug to track the fact `MouseEvent.button` is incorrect for auxiliary buttons, and will follow up with new bug reports for the other anomalies.

[Abrar Rahman Protyasha]

We should probably consider addressing webkit.org/b/267801 at the same time, to make sure we can do testing.

[Jeffrey Blanz]

Any chance this can be reprioritized? 

Especially with work on Pointer Lock API for iOS it would be nice if games could properly identify middle mouse buttons (iPad and Vision Pro only) and any extra mouse buttons (Pad, Vision Pro, and Mac).

The Test results 3 comments up are still valid.

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button

https://unixpapa.com/js/testmouse.html

[Jeffrey Blanz]

Created attachment 476377 [details]
Video Comparison using mozilla test case

Just to clarify this is not geforce now specific. This is all of safari. Attached is an updated video comparing safari for iPad, safari for Mac, and Chrome for Mac. I am unable to get a video of visionOS. I used this testcase https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button

As you can see, the middle button, 4th button, and 3rd button on iPad are reported as a right button (button.2). This is the same for visionOS

On mac the middle button is reported correctly, but the 4th and 3rd button are reported as the middle button as well (button.1). 

As you can see in the video, the buttons are all identified correctly on chrome.

[Lily Spiniolas]

Pull request: https://github.com/WebKit/WebKit/pull/52944

[Lily Spiniolas]

Pull request: https://github.com/WebKit/WebKit/pull/53131

[EWS]

Committed 304537@main (5aee38fcd3ae): <https://commits.webkit.org/304537@main>

Reviewed commits have been landed. Closing PR #52944 and removing active labels.

[EWS]

Committed 304568@main (e6f7d52fab9e): <https://commits.webkit.org/304568@main>

Reviewed commits have been landed. Closing PR #55530 and removing active labels.

[Lily Spiniolas]

Re-opening for pull request https://github.com/WebKit/WebKit/pull/55611

[EWS]

Committed 304761@main (0c57767cb6c0): <https://commits.webkit.org/304761@main>

Reviewed commits have been landed. Closing PR #55611 and removing active labels.