Canvas ImageDraw not working in Safari

I am hoping someone can help me. I am trying to crop and resize an image. In Chrome everything works perfectly but in Safari it only works when the image is at a certain sizes(Usually bigger but I cannot work out exactly what the size is when it works. The offsets also seem to effect when it works and when it doesn't)

JS

crop = function(){
    var crop_canvas,
    left = $('.overlay').offset().left - $container.offset().left,
    top =  $('.overlay').offset().top - $container.offset().top,

    width = $('.overlay').width(),
    height = $('.overlay').height();

    crop_canvas = document.createElement('canvas');
    crop_canvas.width = width;
    crop_canvas.height = height;

    var ctx = crop_canvas.getContext('2d')

    ctx.drawImage(image_target, left, top, width, height, 0, 0, width, height);

    window.open(crop_canvas.toDataURL("image/png"));
}

HTML

<div class="container">
    <div class="content">
        <div class="component">
            <div class="overlay">
                <div class="overlay-inner">
                    //part of image which is in here is the part that should be kept
                </div>
            </div>
            <!-- set background image here(background image) -->
            <img class="resize-image" src="resources/img/image2.jpg"> 
        </div>  
    </div>
</div> 

Thanks in advance!