Dealing with bizarrely inverted wheel event deltaX in Microsoft Edge browser?
<p>Today I've discovered some very bizarre behavior in Microsoft's Edge browser, where the <a href="https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaX" rel="nofollow"><code>deltaX</code></a> values for <a href="https://developer.mozilla.org/en-US/docs/Web/Events/wheel" rel="nofollow"><code>wheel</code> events</a> is apparently inverted! This was particularly surprising because this is not consistent with every other browser I've ever tested, including Internet Explorer 11 which returns the expected values.</p>

<p>Seeing this issue in action is rather simple, just run the following code, and use your mouse wheel or trackpad.</p>

<pre><code>window.addEventListener('wheel', function(e) {
    console.log(e.deltaX, e.deltaY);
});
</code></pre>

<p>For your convenience, I've created a full-page example (snippets are tricky for this):</p>

<h1><a href="https://cdn.rawgit.com/AlexanderOMara/1d09ee1dd6b1155ae710401205ef2268/raw/523741dacaae30309b8a7bb710176d6af2880b10/index.html" rel="nofollow">Fullpage Working Example</a></h1>

<p>Wheeling down gives a positive value and wheeling up gives a negative value as expected in Edge, IE, and other browsers. However, in Edge wheeling left gives a positive value, and right a negative value, the exact opposite of every other browser (IE11 and below included).</p>

<p>I made some GIF videos to show off the issue too, linked for file sizes.</p>

<ul>
<li><a href="https://i.imgur.com/OhnJPEv.gifv" rel="nofollow">IE11</a></li>
<li><a href="https://i.imgur.com/X7v0FKn.gifv" rel="nofollow">Edge</a></li>
</ul>

<h1>The question:</h1>

<p>Why is it like this, and is there a solution for handling the browser compatibility issues? Is there a way to feature-detect this? Is this behavior a bug, or is it documented somewhere?</p>

<p><a href="https://www.w3.org/TR/DOM-Level-3-Events/" rel="nofollow">The spec strongly suggests this is in-fact incorrect behavior</a>:</p>

<blockquote>
  <p>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.</p>
</blockquote>

<h2>Notes:</h2>

<ul>
<li>I've tested this in both a Windows 10 VM and a native laptop, behavior was the same for both.</li>
<li>I'm reasonably sure this is not related to "natural"/inverted scrolling (off on all systems and VM hosts tested, and only happening on one axis).</li>
<li>On a side note, I don't know if <code>deltaZ</code> is inverted or even supported to begin with, I lack such an input device.</li>
</ul>

<h1>Bug Report:</h1>

<p><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8444720/" rel="nofollow">I've reported the bug to Microsoft here.</a> It has been assigned to someone, so hopefully it will be fixed.</p>