在移動WebKit中的CSS3轉換變換

我對CSS3中的元素有一個轉換轉換，但是每當我運行動畫時，似乎動畫中涉及的其中一個元素總是隱藏在動畫期間。在移動WebKit中的CSS3轉換變換

這裏是CSS，HTML和JavaScript代碼：

CSS

div.toggle { 
    font-family: Arial, Helvetica, sans-serif; 
    width: 92px; 
    overflow: hidden; 
    cursor: default; 
    border-radius: 3px; 
    border: 1px solid #919191; 
    float: right; 
    position: relative; 
    height: 26px 
} 
    div.toggle div.control-cont { 
     display: -webkit-box; 
     position: absolute; 
     -webkit-transition:all 0.2s ease-in-out; 
     width: 155px; 
    } 
    div.toggle span { 
     display: inline-block; 
     float: left; 
     text-transform: uppercase; 
     position: relative; 
     float: left; 
    } 
     div.toggle span.on { 
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(41,90,178,1)), color-stop(50%,rgba(64,133,236,1)), color-stop(51%,rgba(77,143,239,1)), color-stop(100%,rgba(118,173,252,1))); 
      background: -webkit-linear-gradient(top, rgba(41,90,178,1) 0%,rgba(64,133,236,1) 50%,rgba(77,143,239,1) 51%,rgba(118,173,252,1) 100%); 
      font-weight: bold; 
      color: #fff; 
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); 
      font-size: 16px; 
      width: 57px; 
      text-align: center; 
      padding-top: 4px; 
     } 
      div.toggle.important span.on { 
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(210,102,8,1)), color-stop(2%,rgba(234,115,10,1)), color-stop(4%,rgba(248,123,12,1)), color-stop(50%,rgba(255,140,14,1)), color-stop(51%,rgba(255,153,33,1)), color-stop(100%,rgba(254,188,86,1))); 
       background: -webkit-linear-gradient(top, rgba(210,102,8,1) 0%,rgba(234,115,10,1) 2%,rgba(248,123,12,1) 4%,rgba(255,140,14,1) 50%,rgba(255,153,33,1) 51%,rgba(254,188,86,1) 100%); 
      } 
     div.toggle span.handle { 
      border-radius: 3px; 
      height: 26px; 
      border-left: 1px solid #9f9f9f; 
      border-right: 1px solid #9f9f9f; 
      width: 39px; 
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(239,239,239,1)), color-stop(3%,rgba(206,206,206,1)), color-stop(100%,rgba(251,251,251,1))); 
      background: -webkit-linear-gradient(top, rgba(239,239,239,1) 0%,rgba(206,206,206,1) 3%,rgba(251,251,251,1) 100%); 
      z-index: 10; 
      left: -5px 
     } 
     div.toggle span.off { 
      font-size: 16px; 
      font-weight: bold; 
      color: #7e7e7e; 
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(181,181,181,1)), color-stop(2%,rgba(207,207,207,1)), color-stop(4%,rgba(223,223,223,1)), color-stop(6%,rgba(231,231,231,1)), color-stop(50%,rgba(239,239,239,1)), color-stop(51%,rgba(249,249,249,1)), color-stop(100%,rgba(254,254,254,1)), color-stop(100%,rgba(251,251,251,1))); 
      background: -webkit-linear-gradient(top, rgba(181,181,181,1) 0%,rgba(207,207,207,1) 2%,rgba(223,223,223,1) 4%,rgba(231,231,231,1) 6%,rgba(239,239,239,1) 50%,rgba(249,249,249,1) 51%,rgba(254,254,254,1) 100%,rgba(251,251,251,1) 100%); 
      left: -10px; 
      text-align: center; 
      padding-top: 4px; 
      width: 57px; 
     } 
    div.toggle input { 
     display: none; 
    }

的JavaScript：

(function($) { 
    $.fn.toggle = function() 
    { 
     this.each(function() { 
      var toggle_class = ($(this).attr('checked')) ? 'checked' : ''; 
      var important_class = ($(this).hasClass('important')) ? 'important' : ''; 
      var this_transformed = false; 

      var this_toggle = $('<div class="toggle">\ 
            <div class="control-cont">\ 
             <span class="on">on</span>\ 
             <span class="handle"></span>\ 
             <span class="off">off</span>\ 
            </div>\ 
           </div>'); 

      this_toggle.addClass(toggle_class); 
      this_toggle.addClass(important_class); 

      var thecheckbox = this; 
      $(this).replaceWith(this_toggle); 
      this_toggle.append(thecheckbox); 

      if(toggle_class != 'checked') 
      { 
       this_toggle.find('.control-cont').css({ left: '-53px' }); 
      } 

      this_toggle.click(toggle_switch); 
      $(thecheckbox).change(toggle_switch); 

      function toggle_switch() { 
       var self  = $(this); 
       var this_off = $(this).find('.off'); 
       var this_on = $(this).find('.on'); 
       var this_container = $(this).find('.control-cont'); 
       var the_checkbox = $(this).find('input[type="checkbox"]'); 

       if($(this).hasClass('checked')) 
       { 
        if(!this_transformed) 
        { 
         this_container.css("-webkit-transform", "translate(-53px, 0px)"); 
         this_transformed = true; 
        } 
        else 
        { 
         this_container.css("-webkit-transform", "translate(53px, 0px)"); 
        } 
        self.removeClass('checked'); 
        the_checkbox.attr('checked', false); 
       } 
       else 
       { 
        if(!this_transformed) 
        { 
         this_container.css("-webkit-transform", "translate(53px, 0px)"); 
         this_transformed = true; 
        } 
        else 
        { 
         this_container.css("-webkit-transform", "translate(0px, 0px)"); 
        } 
        self.addClass('checked'); 
        the_checkbox.attr('checked', true); 
       } 
      }; 
     }); 
    }; 
}) (jQuery);

從本質上講，動畫沿着或向後移動整個div.control-con ，取決於複選框的狀態。在Chrome和Safari中一切正常，但在Mobile Safari中運行時，出於某種原因，在運行動畫時，不會顯示span.off和span.on元素。

哪個span元素被隱藏取決於動畫的方向。這裏的問題的截圖，你會發現span.off不顯示，直到動畫完成：

enter image description here