70934 2011-10-26 08:46:07 -0700 Moving an SVG element (in the DOM) during a mousedown prevents the following click event 2022-08-12 14:29:34 -0700 1 1 1 Unclassified WebKit UI Events 528+ (Nightly build) Unspecified Unspecified NEW InRadar P2 Normal --- 1 webkit.org webkit-unassigned ahmad.saleem792 ap bfulgham rniwa webkit-bug-importer zimmermann oldest_to_newest 490874 0 112515 webkit.org 2011-10-26 08:46:07 -0700 Created attachment 112515 Test case This may happen for any element, I did not test it, but it happened on SVG elements for me. Problem test case: * Click on the partially hidden blue ellipsis on top * Expected: print a message ✔ Observed: print a message * Click on the partially hidden blue ellipsis in the middle group * Expected: print a message ✔ Observed: print a message * Click on the partially hidden blue ellipsis in the bottom group * Expected: the blue ellipsis moves on top of the red one * Expected: print a message ✔ Observed: the blue ellipsis moves on top of the red one ✘ Observed: *no message is printed* All ellipsis have the exact same click handler, which prints a message (with their class name) below the SVG frame. In the third case, the ellipsis is moved around in the DOM in order to be stacked on top of the red ellipsis (you can click on the partially hidden red ellipsis of the third group after that to do it again): as far as I know, SVG draws elements in strict document order, so the only way to have an element on top of an other is to put them in the correct order in the DOM. Since the click event is the same on all `ellipse` elements, one would expect to see the same behavior everywhere. And indeed if you click twice on the blue ellipsis (once to put it on top of the red one and once more) you will see the message print correctly. Context: * Creating graphs using the Dracula library http://www.graphdracula.net/ * Dracula defers to Raphaël for the SVG backend: http://raphaeljs.com/ * Dracula handles drag&dropping nodes (by default, not sure it can be disabled) which can be seen on the front-page example, this is handled via mouse* events * In the latest Dracula version (this does not seem to happen in the one on the front page), the `mousedown` event starting the drag makes a call to Raphael's Element#toFront: https://github.com/strathausen/dracula/blob/master/js/dracula_graph.js#L166 * Element#toFront moves the element to ensure it is the last one in its parent: https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js#L1049 As a result, when trying to hook a `click` event to a node (which Raphael supports: http://raphaeljs.com/reference.html#Element.click)… it did not work at all in Webkit browsers (and was quite annoying to track down). 1890988 1 ahmad.saleem792 2022-08-12 14:16:37 -0700 I am able to reproduce the issue in attached test case for bottom group in Safari 15.6 and Safari Technical Preview 151 on macOS 12.5, where clicking on "blue" move it on top of "red" ellipsis but it does not show any message. It is same case with Chrome Canary 106 but it is different with Firefox Nightly 105, which shows this message: "Clicked movetotop". I am changing the status to "New" now. Thanks! 1890993 2 webkit-bug-importer 2022-08-12 14:29:34 -0700 <rdar://problem/98586986> 112515 2011-10-26 08:46:07 -0700 2011-10-26 08:46:07 -0700 Test case movebug.html text/html 1962 webkit.org PCFkb2N0eXBlIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0idXRmLTgi PgoKICAgIDx0aXRsZT5TVkcgRE9NIG1vdmUgZXZlbnQgZGlzcGFyaXRpb248L3RpdGxlPgogICAg PHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPgogICAgICBkb2N1bWVudC5hZGRFdmVudExp c3RlbmVyKCJET01Db250ZW50TG9hZGVkIiwgZnVuY3Rpb24gKCkgewogICAgICAgICAgJ3VzZSBz dHJpY3QnOwogICAgICAgICAgdmFyIGVscyA9IGRvY3VtZW50LmdldEVsZW1lbnRzQnlUYWdOYW1l KCdlbGxpcHNlJyk7CiAgICAgICAgICBmb3IgKHZhciBpPTA7IGk8ZWxzLmxlbmd0aDsgKytpKSB7 CiAgICAgICAgICAgICAgZWxzW2ldLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24g KCkgewogICAgICAgICAgICAgICAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbG9nJykuYXBw ZW5kQ2hpbGQoCiAgICAgICAgICAgICAgICAgICAgICBkb2N1bWVudC5jcmVhdGVUZXh0Tm9kZSgn Q2xpY2tlZCAnICsgdGhpcy5nZXRBdHRyaWJ1dGUoJ2NsYXNzJykgKyAnXG4nKSk7CiAgICAgICAg ICAgICAgfSk7CiAgICAgICAgICB9CgogICAgICAgICAgdmFyIGVscyA9IGRvY3VtZW50LmdldEVs ZW1lbnRzQnlDbGFzc05hbWUoJ2VtcHR5bW91c2Vkb3duJyk7CiAgICAgICAgICBmb3IodmFyIGk9 MDsgaTxlbHMubGVuZ3RoOyArK2kpIHsKICAgICAgICAgICAgICBlbHNbaV0uYWRkRXZlbnRMaXN0 ZW5lcignbW91c2Vkb3duJywgZnVuY3Rpb24gKCkge30pOwogICAgICAgICAgfQoKICAgICAgICAg IHZhciBlbHMgPSBkb2N1bWVudC5nZXRFbGVtZW50c0J5Q2xhc3NOYW1lKCdtb3ZldG90b3AnKTsK ICAgICAgICAgIGZvcih2YXIgaT0wOyBpPGVscy5sZW5ndGg7ICsraSkgewogICAgICAgICAgICAg IGVsc1tpXS5hZGRFdmVudExpc3RlbmVyKCdtb3VzZWRvd24nLCBmdW5jdGlvbiAoKSB7CiAgICAg ICAgICAgICAgICAgIHRoaXMucGFyZW50Tm9kZS5hcHBlbmRDaGlsZCh0aGlzKTsKICAgICAgICAg ICAgICB9KTsKICAgICAgICAgIH0KICAgICAgfSk7CiAgICA8L3NjcmlwdD4KICA8L2hlYWQ+CiAg PGJvZHk+CiAgICA8c3ZnIGhlaWdodD0iMjAwIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIzMDAiIHht bG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICAgIDxlbGxpcHNlIGN4PSIxMDAi IGN5PSIzMCIgcng9IjQwIiByeT0iMjAiIGZpbGw9ImJsdWUiIHN0cm9rZT0iYmxhY2siCiAgICAg ICAgICAgICAgIGNsYXNzPSJub21vdXNlZG93biI+PC9lbGxpcHNlPgogICAgICA8ZWxsaXBzZSBj eD0iNjAiIGN5PSIzMCIgcng9IjQwIiByeT0iMjAiIGZpbGw9InJlZCIgc3Ryb2tlPSJibGFjayIK ICAgICAgICAgICAgICAgY2xhc3M9Im5vbW91c2Vkb3duIj48L2VsbGlwc2U+CiAgICAKICAgICAg PGVsbGlwc2UgY3g9IjEwMCIgY3k9IjgwIiByeD0iNDAiIHJ5PSIyMCIgZmlsbD0iYmx1ZSIgc3Ry b2tlPSJibGFjayIKICAgICAgICAgICAgICAgY2xhc3M9ImVtcHR5bW91c2Vkb3duIj48L2VsbGlw c2U+CiAgICAgIDxlbGxpcHNlIGN4PSI2MCIgY3k9IjgwIiByeD0iNDAiIHJ5PSIyMCIgZmlsbD0i cmVkIiBzdHJva2U9ImJsYWNrIgogICAgICAgICAgICAgICBjbGFzcz0iZW1wdHltb3VzZWRvd24i PjwvZWxsaXBzZT4KICAgIAogICAgICA8ZWxsaXBzZSBjeD0iMTAwIiBjeT0iMTMwIiByeD0iNDAi IHJ5PSIyMCIgZmlsbD0iYmx1ZSIgc3Ryb2tlPSJibGFjayIKICAgICAgICAgICAgICAgY2xhc3M9 Im1vdmV0b3RvcCI+PC9lbGxpcHNlPgogICAgICA8ZWxsaXBzZSBjeD0iNjAiIGN5PSIxMzAiIHJ4 PSI0MCIgcnk9IjIwIiBmaWxsPSJyZWQiIHN0cm9rZT0iYmxhY2siCiAgICAgICAgICAgICAgIGNs YXNzPSJtb3ZldG90b3AiPjwvZWxsaXBzZT4KICAgIDwvc3ZnPgogICAgPHByZSBpZD0ibG9nIj48 L3ByZT4KICA8L2JvZHk+CjwvaHRtbD4K