A noticeable gap appears in Microsoft Edge between the <select> menu and its options when expanding the menu, as shown here:
https://i.stack.imgur.com/SprJ2.png
This particular issue can cause problems with the mouseout event due to inconsistent behavior compared to Chrome. Take a look at this simple example:
const menu = document.getElementById('menu');
menu.addEventListener('mouseout', (e) => {
// The line below fixes the glitch in Firefox, but not Edge
if (e.relatedTarget === null) return;
document.body.classList.toggle('red');
});.red {
background: red;
}<select id="menu">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>In Microsoft Edge specifically, there is an issue where moving the mouse cursor between the menu and its expanded options triggers the mouseout event. Is there a way to prevent this behavior in Edge?