크롬에서 확대/축소가 작동하지 않습니다.

Question

두 개의 버튼 (확대/축소 & 축소)이 있습니다. 확대 버튼에 #Page을 클릭하고 확대/축소 버튼을 클릭하여 #Page을 클릭하십시오. div가 축소되어야합니다. 나는 자바 스크립트 다음 쓴이 들어 , 버튼에 줌 줌 아웃 버튼

$("#zoomout").click(
    function(e){ 
     $("#Page").css("zoom", "1"); 
     $("#Page").css("-o-transform", "scale(1,1)"); 
     $("#Page").css("-moz-transform", "scale(1,1)"); 
     $("#Page").css("-webkit-transform", "scale(1)"); 
     e.preventDefault();  
}); 

에 대한

$("#zoomin").click(
    function(e){   
     $("#Page").css("zoom", "2.4"); 
     $("#Page").css("-o-transform", "scale(2.4,2.4)"); 
     $("#Page").css("-moz-transform", "scale(2.4,2.4)"); 
     $("#Page").css("-webkit-transform", "scale(2.4)"); 
     e.preventDefault(); 
}); 

모질라 파이어 폭스 브라우저, 에 잘 작동하지만, 구글에서 작동하지 않는이 스크립트 Chrome 브라우저. 이 문제를 어떻게 해결할 수 있습니까?

Answer 1

나는이 공급 업체 접두사없이`transform` 규칙을 추가하면

$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase()); 

$("#zoomout").click(
    function(e){ 
      if($.browser.chrome) 
      { 
       $("#Page").css("-webkit-transform-origin","0 0"); 
       $("#Page").css("-webkit-transform","scale(1)"); 
       $(".Page").css("background-size", "contain"); 
       e.preventDefault(); 
      } 
      else 
      { 
        $("#Page").css("zoom", "1"); 
        $("#Page").css("-o-transform", "scale(1,1)"); 
        $("#Page").css("-moz-transform", "scale(1,1)"); 
        $("#Page").css("-webkit-transform", "scale(1)"); 
        e.preventDefault(); 
      } 
    }); 


$("#zoomin").click(
    function(e){ 
      if($.browser.chrome) 
      { 
       $("#Page").css("-webkit-transform-origin","0 0"); 
       $("#Page").css("-webkit-transform","scale(2.4)"); 
       $(".Page").css("background-size", "100%"); 
       e.preventDefault(); 
      } 
      else 
      { 

        $("#Page").css("zoom", "2.4"); 
        $("#Page").css("-o-transform", "scale(2.4,2.4)"); 
        $("#Page").css("-moz-transform", "scale(2.4,2.4)"); 
        $("#Page").css("-webkit-transform", "scale(2.4)"); 
        e.preventDefault(); 
      } 

    }); 

Answer 2

-webkit-transform 값이 다른 두 개의 변환과 일치하지 않습니다. scale(1,1) 대신 scale(1)이라고 표시됩니다.

이 라인을 사용해보십시오 :

$("#Page").css("-webkit-transform", "scale(1,1)"); 

$("#Page").css("-webkit-transform", "scale(2.4,2.4)");