Make Jquery UI drag and drop work when zoomed out

Question

I was looking at this drag and drop demo for Jquery UI. The demo works fine at a normal zoom. But if you zoom out to say, 50%, things get wonky. http://www.elated.com/res/File/articles/development/javascript/jquery/drag-and-drop-with-jquery-your-essential-guide/card-game.html

Can anyone suggest a way to fix the demo?

Answer 1

As far as I know, browser zooms and javascript/jQuery don't play nice. A half a decade ago, zooming on the browser didn't zoom images (at least in IE), etc.

http://bugs.jqueryui.com/ticket/4140 Here's an issue suggesting that there's no way to fix zoom-related bugs that arise in jQuery. It's from two years ago, but it says:

Unfortunately it is impossible to my knowledge to reliably detect the page zoom and its value in any browser, so I have to close this ticket for now. If you find a way to detect it that doesn't cause significant overhead, please reopen.

I found that if you're in Google Docs and you use the browser zoom, an message will show alerting the user that different zoom levels are not supported. So I think the best choice for you, if you wanted to fix this, would be to do the same thing that Google is doing.