Created attachment 469201 [details] 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.
Created attachment 469202 [details] Behavior in Chromium browsers
Created attachment 469203 [details] Web Page Structure
Apple Feedback Assistant ID: FB13219197
rdar://116293548
Thank you for the report! Could you please provide steps to reproduce, and/or a reduced test case? > Apple Feedback Assistant ID: FB13219197 To clarify, is this a report filed by you that is meant to track this exact same issue? It doesn't look the same to me.
Hi there, We have been experiencing similar issues to the one reported here in our application. Our application contains drag & drop functionality between a parent page and an iframe, and Safari users are impacted since version 17.2. Here's a small reproduction of the issue: https://codesandbox.io/p/sandbox/react-iframe-examples-forked-sz4ydd?file=%2Fsrc%2Fapp.js%3A30%2C24-30%2C35 Mouse down on the blue div and try hovering over the iframe's child while the mouse is held down. On Safari 17.2, the mouse events in the iframe are ignored and the iframe child is not highlighted on hover. On Chrome, the mouse events are respected and the iframe child is highlighted when it is hovered. This is the expected behaviour.
(In reply to Alexey Proskuryakov from comment #5) > Thank you for the report! Could you please provide steps to reproduce, > and/or a reduced test case? > > > Apple Feedback Assistant ID: FB13219197 > > To clarify, is this a report filed by you that is meant to track this exact > same issue? It doesn't look the same to me. Hi Alexey, It looks like I have included the wrong Feedback Assistant ID. My apologies. The correct Feedback Assistant ID is: FB13492748
(In reply to Boris from comment #6) > https://codesandbox.io/p/sandbox/react-iframe-examples-forked- > sz4ydd?file=%2Fsrc%2Fapp.js%3A30%2C24-30%2C35 Your example showcases events not triggering inside an iframe if the interaction started on the parent, whilst my issue is primarily about the parent not receiving events if the interaction started from within the iframe. Again, the issue showcased in your example has the same behavior as the issue that I'm facing, just the other way around.
Created attachment 469437 [details] It's a reduced test file that represents one side of the bug from the original post. Opening this file you can test with the other browsers and it works as expected. It does not in latest version in Safari.
(In reply to Alexey Proskuryakov from comment #5) > Thank you for the report! Could you please provide steps to reproduce, > and/or a reduced test case? > > > Apple Feedback Assistant ID: FB13219197 > > To clarify, is this a report filed by you that is meant to track this exact > same issue? It doesn't look the same to me. Hi Alexy, I am Boris' colleague at Webflow. I just added a reduced test file from Boris' reproduction step. I suspect the issue that A Lubbers originally posted is in the same vein. Is there a better place where we can discuss or track this issue? This problem is affecting thousands of our Safari users who cannot work using our product to build for the web. Thanks! Tai
(In reply to Tai Huynh from comment #10) > (In reply to Alexey Proskuryakov from comment #5) > > Thank you for the report! Could you please provide steps to reproduce, > > and/or a reduced test case? > > > > > Apple Feedback Assistant ID: FB13219197 > > > > To clarify, is this a report filed by you that is meant to track this exact > > same issue? It doesn't look the same to me. > > Hi Alexy, I am Boris' colleague at Webflow. I just added a reduced test file > from Boris' reproduction step. I suspect the issue that A Lubbers originally > posted is in the same vein. Is there a better place where we can discuss or > track this issue? This problem is affecting thousands of our Safari users > who cannot work using our product to build for the web. > > Thanks! > Tai I believe this is closely related to this issue and may be caused by the same bug. My original issue was the other way around (iFrame -> parent instead of parent -> iFrame).