Mobile Safari Crashing with background-position css - mobile-safari

Question

I have the following code which crashes in mobile safari, works in all other browsers. I have a checkbox that is using jquery plugin for displaying a nicer image when it is checked. The issue seems to be in the background-position attribute support in Safari-mobile but I don't know how to fix it.
<input type="checkbox" id="terms" data-bind="checked: termsOfUseAccepted" >
<label for="terms" class="" data-bind="text:TermsLabel"></label>
<div class="chk-overview ">
<h2 >Continue</h2>
</div>
Following Javascript is used
$(function () {
var isTouch = false;
try { isTouch = "ontouchstart" in window; } catch (e) { }
var $activeTip = null;
if (isTouch) {
document.ontouchstart = function () {
if ($activeTip) {
$activeTip.data("close").call($activeTip);
$activeTip = null;
}
};
}
function courseViewModel() {
var self = this;
self.termsOfUseAccepted = ko.observable(false);
self.TermsLabel = ko.observable('I understand');
self.continueDisplay = ko.computed({
read: function() {
return self.termsOfUseAccepted();
},
owner: this,
deferEvaluation: true
});
};
var viewModel = new courseViewModel();
ko.applyBindings(viewModel);
});
(function($) {
$.fn.hoverIntent = function(f, g) {
var cfg = {sensitivity: 7,interval: 100,timeout: 0};
cfg = $.extend(cfg, g ? {over: f,out: g} : f);
var cX, cY, pX, pY;
var track = function(ev) {
cX = ev.pageX;
cY = ev.pageY
};
var compare = function(ev, ob) {
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
if ((Math.abs(pX - cX) + Math.abs(pY - cY)) < cfg.sensitivity) {
$(ob).unbind("mousemove", track);
ob.hoverIntent_s = 1;
return cfg.over.apply(ob, [ev])
} else {
pX = cX;
pY = cY;
ob.hoverIntent_t = setTimeout(function() {
compare(ev, ob)
}, cfg.interval)
}
};
var delay = function(ev, ob) {
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
ob.hoverIntent_s = 0;
return cfg.out.apply(ob, [ev])
};
var handleHover = function(e) {
var ev = jQuery.extend({}, e);
var ob = this;
if (ob.hoverIntent_t) {
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t)
}
if (e.type == "mouseenter") {
pX = ev.pageX;
pY = ev.pageY;
$(ob).bind("mousemove", track);
if (ob.hoverIntent_s != 1) {
ob.hoverIntent_t = setTimeout(function() {
compare(ev, ob)
}, cfg.interval)
}
} else {
$(ob).unbind("mousemove", track);
if (ob.hoverIntent_s == 1) {
ob.hoverIntent_t = setTimeout(function() {
delay(ev, ob)
}, cfg.timeout)
}
}
};
return this.bind('mouseenter', handleHover).bind('mouseleave', handleHover)
}
})(jQuery);
(function($) {
jQuery.fn.customInput = function () {
$(this).each(function (i) {
if ($(this).is('[type=checkbox],[type=radio]')) {
var input = $(this);
if (input.data('customInput') === 'done') {
return true;
}
else {
input.data('customInput', 'done');
}
// get the associated label using the input's id
var label = $('label[for=' + input.attr('id') + ']');
//get type, for classname suffix
var inputType = (input.is('[type=checkbox]')) ? 'checkbox' : 'radio';
// wrap the input + label in a div
$('<div class="custom-' + inputType + '"></div>').insertBefore(input).append(input, label);
// find all inputs in this set using the shared name attribute
var allInputs = $('input[name=' + input.attr('name') + ']');
// necessary for browsers that don't support the :hover pseudo class on labels
label.hover(
function () {
$(this).addClass('hover');
if (inputType == 'checkbox' && input.is(':checked')) {
$(this).addClass('checkedHover');
}
},
function () { $(this).removeClass('hover checkedHover'); }
);
//bind custom event, trigger it, bind click,focus,blur events
input.bind('updateState', function () {
if (input.is(':checked')) {
if (input.is(':radio')) {
allInputs.each(function () {
$('label[for=' + $(this).attr('id') + ']').removeClass('checked');
});
};
label.addClass('checked');
}
else { label.removeClass('checked checkedHover checkedFocus'); }
})
.trigger('updateState')
.click(function () {
if (input.is(':checked')) {
if (input.is(':radio')) {
allInputs.each(function () {
$('label[for=' + $(this).attr('id') + ']').removeClass('checked');
});
};
label.addClass('checked');
}
else { label.removeClass('checked checkedHover checkedFocus'); }
})
.focus(function () {
label.addClass('focus');
if (inputType == 'checkbox' && input.is(':checked')) {
$(this).addClass('checkedFocus');
}
})
.blur(function () { label.removeClass('focus checkedFocus'); });
}
});
};
})(jQuery);
$.fn.smartHover = function (configObject) {
if (isTouch) {
$(this)
.bind("hold", function () {
$activeTip = $(this);
$(this).data("held", true);
})
.bind("hold", configObject.over)
.bind("click", function (e) {
var wasHeld = $(this).data("held");
$(this).data("held", false);
if (wasHeld) {
e.preventDefault();
return false;
}
})
.data("close", configObject.out);
} else {
$(this).hoverIntent(configObject);
}
};
$('input').customInput();
And here is the css
.chk-overview h2 { font: 24px "StoneSansITCW01-SemiBol 735693",sans-serif; margin-bottom: 20px;padding: 0 }
.custom-checkbox label {
background: transparent url(http://aonhewittnavigators.com/AonExchange/media/Image-Gallery/SiteImages/checkbox.png) no-repeat;
outline: 0;
background-position: 0 0;
}
.custom-checkbox label {
cursor: pointer;
display: block;
height: 19px;
outline: 0;
position: relative;
width: 21px;
z-index: 1;
}
.custom-checkbox label.checked {
background-position: 0 bottom;
padding: 0;
}
.custom-checkbox input {
left: 1px;
margin: 0;
outline: 0;
position: absolute;
top: 5px;
z-index: 0;
height: 0;
}

Answer 1

Try removing the height: 0 on the checkbox style. I have seen it crash when the height or width attribute is set on the checkbox input.