draggable with WebKit and position:absolute on target
Hi.
I seem to be having an issue when using jQuery UI and draggable that I can't seem to find a workaround for - and specifically this problem only seems to manifest itself under WebKit (Safari 4, Chrome 4+). Unfortunately, I am building this mockup for use in Adobe AIR which only uses WebKit, so if I want to use draggable, I have to get it to work (properly) in WebKit.
Example mockup for preview:
http://www.sspl.org/temp/load.html
Note: You may have to press Reload/Refresh a few times to see the issue, but it will eventually appear.
What I'm doing:
1. Create an HTML template (separate file)
2. Load template using load().
3. In load()'s callback function, I am then calling any necessary template code.
What's expected:
According to my original CSS definitions, the "application" wrapper should be placed in the bottom right corner (on page load; it can be dynamically moved).
What's happening:
On various random loads, the application wrapper (#application) will appear in the top right corner of the window (body, which acts as a constraining wrapper to hold the application element).
The production code will be separated out more than this, but loading a separate file in remotely and applying modifications to it dynamically was a core (tested) need for templating of my application. I'm uncertain, but I have a feeling the issue may be related to remotely loading the file, and using draggable. If I disable draggable, the page will always load correctly. While I was testing prior to using load(), I believe draggable worked just fine.
Would anyone have an idea of how to work around this issue, or would it be a bug related to webkit?