隐藏输入单选按钮在IE10中不起作用

Having an issue with a function when testing on IE10, it works fine on all other browser including IE Edge.

I have three radio inputs giving the user the option to select the correct size they need, I have done it so the input is not visible and has an image over the top that is clickable which is used to select the radio input. The click works however it doesn't check the option unless you click on the top left corner, is there any way to make it so it works in IE10? As I said it works fine in all other browsers.

HTML

<input type="radio" name="size" id="ss" value="1" class="size"/><label for="ss"><img src="media/product-icons/icon-1.png" alt="Small" /></label>
<input type="radio" name="size" id="sm" value="2" class="size"/><label for="sm"><img src="media/product-icons/icon-2.png" alt="Medium" /></label>
<input type="radio" name="size" id="sc" value="3" class="size"/><label for="sc"><img src="media/product-icons/icon-3.png" alt="Custom" /></label>

Javascript

<script type="text/javascript">//<![CDATA[
    $(window).load(function(){
        $('#size input:radio').addClass('input_hidden');
        $('#size label').click(function() {
           $(this).addClass('selected').siblings().removeClass('selected');

        });
    });//]]> 
</script>

When the input is select it also triggers a jquery request to calculate the cost, so this is not triggering if you don't click the top left corner on IE10 but is fine on other browsers. Its like the radio button is only 10x10 pixels in size. The jquery that is call is below

$(function() {
$(".size, .print, .finish, .delivery").click(function() {
//$(document).on("change","#frmProduct", function() {
    var prodID = $(".productid").val();
    var size = $(".size:checked").val();
    var print = $(".print:checked").val();
    var delivery = $(".delivery:checked").val();
    var finish = [];
    //var finish = $(".finish:checked").val();
    $(".finish:checked").each(function(){
        finish.push($(this).val());
    });
    var qty = $(".qty").val();
    var unit = $(".measurement:checked").val();

    if(unit=='cm'){
        width = $(".inputCmWidth").val();
        height = $(".inputCmHeight").val();
    } else {
        width = $(".inputFtWidth").val();
        height = $(".inputFtHeight").val();
        width2 = $(".inputInWidth").val();
        height2 = $(".inputInHeight").val();

        width=(width*12)+parseFloat(width2);
        height=(height*12)+parseFloat(height2);
    }
    //alert(width +' '+height);
    //$("input:checkbox[name=finish]:checked").each(function(){
    //  finish.push($(this).val());
    //});


    //var size = $("[name='size']").val();
    //var print = $("[name='print']").val();

    var dataString = 'size='+ size +'&print='+ print +'&finish='+ finish +'&qty='+ qty +'&delivery='+ delivery +'&prod='+ prodID +'&width='+ width +'&height='+ height +'&unit='+ unit;

    $.ajax({
        type: "POST",
        url: "../../../inc/calculate.php",
        data: dataString,
        cache: false,
        success: function(html){
            $("#totalPrice").html(html);
        }
    });

    //return false;
});
});

The class to hide the radio button

.input_hidden {
position: absolute;
visibility: hidden;
}

Here is a rough jsfiddle which shows what is happening if you look at it in chrome and IE10 https://jsfiddle.net/1uykeugr

Thanks in advance for your help with this