Problems with Jcrop Crop Area

Problems with Jcrop Crop Area

I'm at my wits end with setting up a cropping tool for my website. Jcrop is the third one I've tried and I've spent way too much time on what should be fairly simple. But what I've come to learn about jQuery - it's just not as simple as "plug it in" sounds.

Now with my vent out of the way, here's my issue.

It all works, usually, but not always; and I don't have any of these problems while testing on the VS project. I should also point out that I am using a custom control since I have several pages which require image cropping capabilities.

Here is a link to a demo implementation of the Jcrop plugin. Change the image if you want to see the various results I am getting.


I suspect it is a image cache issue on the browser; but I have had no positive results in my attempts to prevent caching.

For new images, a default image is loaded to instantiate the crop area at crop=0,0,0,0.
Here are the symptoms I am receiving by browser.

Chrome:
Crop area does not always set when the page is first navigated to - but sometimes it does.
Usually, hitting  ENTER on the browser address bar results in the crop area being displayed.
Clicking the Refresh icon always results in the crop area NOT being displayed.
If the crop area DOES display, after clicking Crop & Save, the crop area is properly displayed again.
If the crop area is NOT displayed, setting the crop area, and clicking Crop & Save results in an error due to the crop selection area in the jcrop being empty. i.e. all values "NaN".

Safari:
Crop area displays when the page is first navigated to - always
Hitting  ENTER on the browser address bar results in the crop area being displayed - always.
Clicking the Refresh icon always results in the crop area NOT being displayed.
If the crop area DOES display, after clicking Crop & Save, the crop area is properly displayed again.
If the crop area is NOT displayed, setting the crop area, and clicking Crop & Save results in an error due to the crop selection area in the jcrop being empty. i.e. all values "NaN".

FireFox:
Crop area displays when the page is first navigated to - always
Hitting  ENTER on the browser address bar results in the crop area being displayed - always.
Clicking the Refresh icon results in the crop area being properly displayed - always.
If the crop area DOES display, after clicking Crop & Save, the crop area is properly displayed again.
If no image is loaded in place of the default image, the crop area displays properly at 0,0 and the Crop & Save button works properly.

Mobile Devices:
One thing at a time. ;)

Let me know if you need any more information.
Thanks for any help. :)