Having trouble with the unexpectedly reversed wheel event deltaX in Microsoft Edge browser?

Question

Having trouble with the unexpectedly reversed wheel event deltaX in Microsoft Edge browser?

Recently, I came across a very peculiar issue in Microsoft's Edge browser regarding the deltaX values for wheel events, where they seem to be inverted. This was quite surprising as it deviates from the behavior of other browsers I have tested, including Internet Explorer 11 which displayed the expected values.

You can witness this problem first-hand by running the following code snippet and using your mouse wheel or trackpad:

window.addEventListener('wheel', function(e) {
    console.log(e.deltaX, e.deltaY);
});

For a hands-on experience, I have provided a full-page example (snippets might not fully capture this):

Check out the Fullpage Working Example here

In Edge, IE, and other browsers, scrolling down yields a positive value while scrolling up gives a negative one, which is expected. However, in Edge, when scrolling left, a positive value is returned, whereas scrolling right results in a negative value – contrary to all other browsers (including IE11 and older versions).

I have also created GIF videos demonstrating this issue, providing links for varying file sizes:

IE11 GIF
Edge GIF

The query at hand:

Why does this discrepancy exist, and is there a solution for effectively managing these compatibility concerns? Can we detect this feature? Is this behavior a bug, or is it detailed in any documentation?

The spec strongly indicates that this behavior is erroneous:

If a user agent scrolls as the default action of the wheel event then the sign of the delta SHOULD be given by a right-hand coordinate system where positive X, Y, and Z axes are directed towards the right-most edge, bottom-most edge, and farthest depth (away from the user) of the document, respectively.

Additional Notes:

I have verified this on both a Windows 10 VM and a native laptop, with consistent behavior in both environments.
This does not seem to be related to "natural"/inverted scrolling, as it is turned off on all systems and VM hosts tested, affecting only one axis.
As a side note, I am unsure if deltaZ follows a similar pattern or if it is even supported, as I do not possess such an input device.

Bug Reporting:

I have submitted a bug report to Microsoft regarding this issue. You can view and track its progress here. Hopefully, it will be addressed promptly.

javascript microsoft-edge mouselistener mousewheel

Answer 1

Answer №1

As we anticipate an official response from Microsoft, potentially in the form of an update to address this problem, I have discovered a method to determine if the browser is providing an incorrectly inverted deltaX.

In addition to this, Edge has introduced support for the non-standard properties wheelDeltaX, wheelDeltaY, and wheelDelta, which are also present in Chrome. Unlike deltaX, these values are accurate and represent the actual wheel change rather than a computed result. Even though their specific values may not be crucial, we can use them to deduce the correct sign value.

In Chrome, the sign values for deltaX and wheelDeltaX are correctly different; when one is negative, the other is positive. This suggests that if both values share the same sign (either negative or positive), it indicates that the signed value of deltaX is incorrect, as it currently is in Edge. Thus, by utilizing this property, we can detect the erroneously inverted value and restore its proper orientation.

Below is a function wrapper that I developed to resolve this issue.

function wheelDeltaX(e) {
    // Retrieve the reported deltaX.
    var r = e.deltaX;

    // In Edge, the deltaX inaccurately aligns with the wheelDeltaX sign.
    // If both sign values match, then un-invert it.
    var wheelDeltaX;
    if (
        r &&
        (wheelDeltaX = e.wheelDeltaX) &&
        (
            (r < 0 && wheelDeltaX < 0) ||
            (r > 0 && wheelDeltaX > 0)
        )
    ) {
        r = -r;
    }

    return r;
}

Assuming that Edge maintains the correct signing for wheelDeltaX after resolving the issue, this solution should remain effective in the future.

Answer 2

As we anticipate an official response from Microsoft, potentially in the form of an update to address this problem, I have discovered a method to determine if the browser is providing an incorrectly inverted deltaX.

In addition to this, Edge has introduced support for the non-standard properties wheelDeltaX, wheelDeltaY, and wheelDelta, which are also present in Chrome. Unlike deltaX, these values are accurate and represent the actual wheel change rather than a computed result. Even though their specific values may not be crucial, we can use them to deduce the correct sign value.

In Chrome, the sign values for deltaX and wheelDeltaX are correctly different; when one is negative, the other is positive. This suggests that if both values share the same sign (either negative or positive), it indicates that the signed value of deltaX is incorrect, as it currently is in Edge. Thus, by utilizing this property, we can detect the erroneously inverted value and restore its proper orientation.

Below is a function wrapper that I developed to resolve this issue.

function wheelDeltaX(e) {
    // Retrieve the reported deltaX.
    var r = e.deltaX;

    // In Edge, the deltaX inaccurately aligns with the wheelDeltaX sign.
    // If both sign values match, then un-invert it.
    var wheelDeltaX;
    if (
        r &&
        (wheelDeltaX = e.wheelDeltaX) &&
        (
            (r < 0 && wheelDeltaX < 0) ||
            (r > 0 && wheelDeltaX > 0)
        )
    ) {
        r = -r;
    }

    return r;
}

Assuming that Edge maintains the correct signing for wheelDeltaX after resolving the issue, this solution should remain effective in the future.

Having trouble with the unexpectedly reversed wheel event deltaX in Microsoft Edge browser?

Check out the Fullpage Working Example here

The query at hand:

Additional Notes:

Bug Reporting:

Answer №1

Similar questions

Aligning a lowercase "i" element within a container

React-Query: executing a function after updating query data

Saving changes made in HTML is not supported when a checkbox is selected and the page is navigated in a React application using Bootstrap

Explore how to effectively use multiple values in a jQuery filter function when working with data attributes

The table refuses to load

When the onload event is triggered, the jscript function called var data is loaded, without any interruption in

Error encountered when attempting to retrieve data from a JSON object

How to format numbers with commas in AngularJS to make them easier to read

UnknownReferenceError: jwreload has not been declared (Exploring dynamic routing in next.js)

Tips for reducing the size of the sidebar when navigating to a specific page

updating the v-model in Vue.js datepicker retains the previously set value while setting a new date

Issues with Skrollr JS on mobile device causing scrolling problem

Creating an HTML table dynamically through JavaScript within a script block

What is the best way to store a jQuery AJAX response in a PHP variable?

How to remove outer quotes from JSON data in Reactjs after using JSON.stringify

What is the reason this JavaScript code functions properly within a <script> tag but not when placed in a separate .js

What is the best way to replace multiple strings with bold formatting in JavaScript without losing the previous bolded text?

Adding Array Elements to List Elements

Having trouble with the functionality of the React Infinite Scroll component

Accessing and parsing JSON data from directories within directories