[Webkit-unassigned] [Bug 266883] New: Mouse Events not working in global scope when interaction started in iFrame

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=266883

            Bug ID: 266883
           Summary: Mouse Events not working in global scope when
                    interaction started in iFrame
           Product: WebKit
           Version: Safari 17
          Hardware: Mac (Intel)
                OS: macOS 14
            Status: NEW
          Severity: Blocker
          Priority: P2
         Component: UI Events
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: alwin at alwinlubbers.nl

Created attachment 469201

  --> https://bugs.webkit.org/attachment.cgi?id=469201&action=review

Behavior in Safari 17.2 & Tech Preview 185

Some web apps will hand off certain things that started in Iframe.

Example:
A CMS uses iframes to display different pages that represent 'apps', they use iframe as a sandbox of sorts. When dragging an image, the CMS will hand off that event to a function outside of the iframe (global) that will handle things like 'mosuemove' and 'mouseup' events. Since the last Safari update (also happens in Technology Preview 185), the 'mousemove' and 'mosueup' events will not trigger outside of the iframe because the user started the interaction inside the iframe. 

Steps that the user takes:
1. Click and drag on an image to rearrange the order.
2. JS will send a message to the parent using 'postMessage'.
3. The parent will handle the rest of the drag-and-drop functionality.
4. When the user lets go of their mouse button, a message will be sent to the frame that the content has been 'dropped' onto.

Steps that the website (js) takes:
1. When the user tries to drag an image, the data of the image is being sent to the parent (global) to be handled by a function that handles 'mousemove' and 'mouseup' events, bound to the 'window'.
2. The iframe style is set to 'pointer-events: none;' to trigger the mouse events bound to the window, it won't work otherwise, even in other browsers.
3. Every time the image is moved, the global function will send a message to the frame where the images hovers over, stating what the 'app' in the iframe may expect to get, like the file type, size and position.
4. When the user lets go of the mouse button, a final message is sent to the iframe under the image, giving the 'app' the content of the dragged content.

Possible fix:
I believe this is caused by Safari thinking that the user is still interacting with the iframe, because the user is holding the mouse button down through the whole process. The moment the user lets go of the mouse button, everything will work 'correctly' and the image will start to drag.

To summarize: Safari will not fire global mouse events as long as the user is holding down the mouse button 'inside' an iframe, even if the iframe style is set to 'pointer-events:none;'.

The functionality was designed this way to let users drag and drop things, like images, to different iframes. It still works flawlessly in all other chromium based browsers and MS Edge and worked in Safari up until the latest update that shipped with Sonoma 14.2.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20231225/5f47cba0/attachment-0001.htm>