javascriptjqueryjcrop

Jcrop failing under IE8 on specific server, works on another

Having a problem with Jcrop failing on our staging server but working fine in production.

Both environments are running on the same hardware, apache virtual hosts are set up. From what we can tell, the environments are identical. The following is the code in the modal box that loads after selecting a picture to upload.

<?php $jsIncludes = array(
    "jQuery-File-Upload-and-Crop-plugin/js/vendor/jquery.ui.widget",
    "jQuery-File-Upload-and-Crop-plugin/js/jquery.iframe-transport",
    "jQuery-File-Upload-and-Crop-plugin/js/jquery.Jcrop",
    "jQuery-File-Upload-and-Crop-plugin/js/canvas-to-blob.min",
    "jQuery-File-Upload-and-Crop-plugin/js/load-image.min",
    "jQuery-File-Upload-and-Crop-plugin/js/main"
    );
echo $this->html->script($jsIncludes); 
?>
<link rel="stylesheet" href="/js/jQuery-File-Upload-and-Crop-plugin/css/jquery.Jcrop.css" type="text/css" />
<!-- CSS to make adjusments to some layouts of JQ FURAC -->
<link rel="stylesheet" href="/js/jQuery-File-Upload-and-Crop-plugin/css/jquery.furac.ui.css"> 
<style>
.modal-image-scroll {
    height:420px;
    overflow:auto;
    overflow-x:hidden;
}
</style>

<!-- modal-gallery is the modal dialog used for the image gallery -->
<div id="modal-gallery" class="modal modal-gallery hide fade" data-filter=":odd">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">&times;</a>
        <h3 class="modal-title">Image Upload and Crop</h3>
    </div>
    <div class="modal-body"><div class="modal-image"></div></div>
    <div class="modal-footer">
        <form id="opCrop">
<!--            <button class="btn modal-crop" type="button" id="startResize">
                <i class="icon-resize-horizontal"></i>
                Resize to:
            </button> -->
            <a class="btn modal-crop" target="_blank" id="startCrop">
                <i class="icon-th"></i>
                <span>Crop Image to:</span>
            </a>
            <label for="inWidthCrop">Width</label> <input type="number" readonly name="widthCrop" id="inWidthCrop" value="">
            <label for="inHeightCrop">Height</label> <input type="number" readonly name="heightCrop" id="inHeightCrop" value="">

<!--             <button type="reset" class="btn btn-warning cancel">
                    <i class="icon-ban-circle icon-white"></i>
                    Clear
                </button> -->
        </form>
    </div>
</div>
<!-- modal for cropping -->
<div id="croppingModal" class="modal hide">
    <div class="modal-header">
        <button type="button" id="btnCloseCrop" class="close" data-dismiss="modal">×</button>
        <h3>Crop Image <span class="dimentions"></span></h3>
    </div>
    <div class="modal-body">

    </div>
    <br />
    <div class="alert alert-info" style="font-size: 12px; padding: 4px 10px 4px 10px;">
        Click and drag over the area of the phone you'd like to use as your profile picture.
    </div>
    <div class="modal-footer">
        <a href="#" class="btn closeModal" data-dismiss="modal" id="btnCancelCrop">Cancel</a>
        <a href="#" class="btn btn-primary" id="btnDoCrop">Crop</a>
    </div>
</div>

Anyone have any idea why this might work on one environment but not another?

The site is using this library: https://github.com/baamenabar/jQuery-File-Upload-and-Crop

What we end up with on the staging environment under IE8 is an image, cropped correctly, but it's all black, regardless of source image.

Solution

  • This is an old unanswered question but just in case anyone comes from a Google search, the answer is to not worry about IE8. It's dead. If a customer needs IE8 support, do so by displaying a message to customers that they need to download a modern browser.