Question

我有以下代码在移动版Safari中崩溃，适用于所有其他浏览器。我有一个使用jquery插件的复选框，用于在选中时显示更好的图像。问题似乎出现在Safari-mobile的后台位置属性支持中，但我不知道如何修复它。

<input type="checkbox" id="terms"  data-bind="checked: termsOfUseAccepted" >
<label for="terms" class="" data-bind="text:TermsLabel"></label>        
<div class="chk-overview ">
<a  href="javascript:;" data-bind="visible: continueDisplay"><h2 >Continue</h2></a>
</div>

使用Javascript后

$(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();

这是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

尝试删除复选框样式上的高度：0。我在复选框输入上设置了height或width属性时看到它崩溃了。

移动Safari崩溃与背景位置CSS

1 个答案: