Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot drop over iframe (not into - but absolutely on top of an iframe) #1388

Open
dolbex opened this issue Nov 14, 2018 · 7 comments
Open

Cannot drop over iframe (not into - but absolutely on top of an iframe) #1388

dolbex opened this issue Nov 14, 2018 · 7 comments
Labels

Comments

@dolbex
Copy link

@dolbex dolbex commented Nov 14, 2018

Hey guys, I ran into a really weird bug in Chrome when you are sorting OVER an iframe via absolute positioned containers. You can start drag just fine but the dropzone is somehow "under" the iframe even though z-index is clearly in order.

See the following pen for example:

https://codepen.io/dolbex/pen/WYpPMq

@owen-m1 owen-m1 added the bug label Nov 22, 2018
@lokesh

This comment has been minimized.

Copy link

@lokesh lokesh commented Dec 4, 2018

I've run into this issue as well but I suspect it has to do with Chrome changing how it handles UI events when they occur over iframes with cross-origin content. Here is a jsfiddle that tests drag event firing over two iframes, one with content from another domain and one with local content. Take a look at the console to track the drag events.

https://jsfiddle.net/lokesh/fsb7kdny/

@owen-m1

This comment has been minimized.

Copy link
Member

@owen-m1 owen-m1 commented Dec 4, 2018

It seems to be an issue localized to drag and drop. For now you can use forceFallback: true.

@owen-m1 owen-m1 added the help wanted label Dec 4, 2018
@lokesh

This comment has been minimized.

Copy link

@lokesh lokesh commented Dec 4, 2018

Thanks @owen-m1 for the quick response. I'll enable forceFallback and see if that resolves the issue I'm seeing in Chrome v70 and greater.

@lokesh

This comment has been minimized.

Copy link

@lokesh lokesh commented Dec 5, 2018

I was able to use the forceFallback option to fix the issue where the sortable action was not working in Chrome 70+ when done in a modal that was positioned over an iframe that contained content from a different domain. Thanks for the help!

@frutality

This comment has been minimized.

Copy link

@frutality frutality commented Jan 21, 2019

When I added forceFallback, I discovered that when I'm dragging element over an iframe, UI becomes slow and glitchy. It becomes really hard to sort elements containing iframes. So I added a workaround: transparent absolutely positioned div with 100% width and height, that is "visible" only when user is dragging something.

Simplified markup:

<div>
    <iframe src="..."></iframe>
    <div class="workaround"></div>
</div>

.workaround{
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10; /* this should be adjusted depending on your needs */
}

I skipped code responsible for hiding/showing workaround block, because it is very dependent on your framework and situation.

@dolbex

This comment has been minimized.

Copy link
Author

@dolbex dolbex commented Jan 21, 2019

I like that fix @frutality - Not too hacky and hey, gotta do whatcha gotta do when Chrome isn't behaving. :)

@imrene868

This comment has been minimized.

Copy link

@imrene868 imrene868 commented Feb 13, 2019

Wow, and here I've been trying to figure out why I couldn't sort when a few seemingly unrelated conditions were met. Spent an entire 3 days trying to figure this out and then I realized that this bug is actually relevant to me and the actual cause.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants
You can’t perform that action at this time.