126711 2014-01-09 12:17:16 -0800 mouseleave event fires for leaving elements inside the shadow DOM of input[type]=range 2014-03-19 10:31:17 -0700 1 1 1 Unclassified WebKit UI Events 528+ (Nightly build) Unspecified Unspecified NEW P2 Normal --- 1 calvaris webkit-unassigned ap koivisto rniwa zan oldest_to_newest 966017 0 calvaris 2014-01-09 12:17:16 -0800 Given the following HTML code: <html> <body> <div id="outer" style="height: 300px; width=300px; background-color: green;"> <input id="inner" type="range"></input> </div> <p id="demo">Run event to see this text changed.</p> <p id="debug">debug.</p> <div> <pre> <script> var i = 0; function myCallback(event) { inner = document.getElementById("inner"); debug = document.getElementById("debug"); debug.innerHTML = "event target id: " + event.relatedTarget.id + ", inner id: " + inner.id; if (event.relatedTarget != inner) { demo = document.getElementById("demo"); demo.innerHTML = ++i; } } outer = document.getElementById("outer"); outer.addEventListener('mouseout', myCallback, false); </script> </pre> </div> </body> </html> <body> <div id="outer" style="height: 300px; width=300px; background-color: green;"> <input id="inner" type="range"></input> </div> <p id="demo">Run event to see this text changed.</p> <p id="debug">debug.</p> <div> <pre> <script> var i = 0; function myCallback(event) { inner = document.getElementById("inner"); debug = document.getElementById("debug"); debug.innerHTML = "event target id: " + event.relatedTarget.id; if (event.relatedTarget != inner) { demo = document.getElementById("demo"); demo.innerHTML = ++i; } } outer = document.getElementById("outer"); outer.addEventListener('mouseout', myCallback, false); </script> </pre> </div> </body> </html> Steps: 1) Open the the code in the browser 2) Move the mouse to the green div 3) Move the mouse out of the green div 4) Move it in again 5) Move it to the input range (out of the thumb) 6) Move it onto the thumb Chromium outcome: 5) Number not increased and debug is "event target id: inner" 6) Number not increased and debug remains "event target id: inner" WebKitGTK+: 5) Number increased and debug is "event target id:" 6) Number not increased and debug changes to "event target id: inner" For some reason in WebKitGTK+ we are not handling those events correctly. 966018 1 calvaris 2014-01-09 12:18:25 -0800 (In reply to comment #0) It looks like I pasted too much code, the good one is: <html> <body> <div id="outer" style="height: 300px; width=300px; background-color: green;"> <input id="inner" type="range"></input> </div> <p id="demo">Run event to see this text changed.</p> <p id="debug">debug.</p> <div> <pre> <script> var i = 0; function myCallback(event) { inner = document.getElementById("inner"); debug = document.getElementById("debug"); debug.innerHTML = "event target id: " + event.relatedTarget.id + ", inner id: " + inner.id; if (event.relatedTarget != inner) { demo = document.getElementById("demo"); demo.innerHTML = ++i; } } outer = document.getElementById("outer"); outer.addEventListener('mouseout', myCallback, false); </script> </pre> </div> </body> </html> 966271 2 zan 2014-01-10 00:28:36 -0800 Fiddle: http://jsfiddle.net/eE563/ 966296 3 calvaris 2014-01-10 02:04:45 -0800 It also happens in Mac, so I assume the bug is crossplatform, removing [GTK] label. 966301 4 calvaris 2014-01-10 02:33:08 -0800 According to the shadow dom, the range is composed by three divs, being the innest one the thumb and that's the one signalling itself as id="inner" in the example. Anyway, one of the other two divs must be firing that other problematic event that shouldn't be happening because we shouldn't be firing those events for things in the shadow dom, I guess. 966467 5 rniwa 2014-01-10 11:03:28 -0800 Could you precisely explain what the problem is, and what the expected outcome is? How "incorrect" is it? 966685 6 calvaris 2014-01-10 16:44:02 -0800 (In reply to comment #5) > Could you precisely explain what the problem is, and what the expected outcome is? How "incorrect" is it? Sorry, I should have said that I consider the Chromium one as the correct. The explanation can be read partially in comment 4, but summing up: if you read the event.relatedTarget when going out from the green div to the range input, you should be receiving the range input. That isn't happening. From the DOM POV the range input should behave as a single component and it is not. You receive one event when 'leaving' to the range and another when 'leaving' to the range thumb instead. 966687 7 rniwa 2014-01-10 16:47:51 -0800 Thanks for the clarification.