CSS3 모바일 웹킷의 변환 전환

Question

CSS3의 요소에 전환 변환이 있지만 애니메이션을 실행할 때마다 애니메이션과 관련된 요소 중 하나가 애니메이션 기간 동안 항상 숨겨져있는 것처럼 보입니다.

(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 이동 :

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; 
    } 

자바 스크립트

CSS : 여기

는 CSS, HTML 및 자바 스크립트 코드 확인란의 상태에 따라 다릅니다. Chrome과 Safari에서는 모두 정상적으로 작동하지만 모바일 Safari에서 실행되는 경우 애니메이션을 실행하면 span.off 및 span.on 요소가 표시되지 않습니다.

숨겨져있는 span 요소는 애니메이션의 방향에 따라 다릅니다. 여기에 문제의 스크린 샷의 애니메이션이 완료 될 때까지, 당신은 span.off가 표시되지 않는 것을 알 수 있습니다 :

I했습니다 또한 jsFiddle에 참조 할 수 있도록이를 넣어 : http://jsfiddle.net/kShEQ/

Answer 1

모바일 사파리는 일반적인 사파리와 웹킷 엔진의 정확한 복제본이 아닙니다. 하나의 웹킷 엔진 인 haha가 있다는 것은 신화입니다. 모바일 사파리는 전환을 다르게 렌더링합니다. 내가 본 것에서 전환 값을 입력하는 구문은 약간 다릅니다. 이 질문은 훨씬 더 구체적으로 수

Scaling problem with -webkit-transform with mobile safari on iPad