移動Safari與背景位置css崩潰

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。當複選框輸入上設置了高度或寬度屬性時，我已經看到它崩潰。