zoom-in & zoom-out is not working in chrome

Question

I have 2 buttons (zoom-in & zoom-out), on zoom-in button click the #Page div should zoom in and on zoom-out button click the #Page div should zoom out. For this I have written following javascript,

for zoom out button

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

for zoom in button

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

This script working fine on Mozilla Firefox browser, but not working on Google Chrome browser. How can I resolve this problem ?

Answer 1

I think this will help you

$.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

Your -webkit-transform value does not match the other two transforms; it says scale(1) instead of scale(1,1) .

Try using these lines:

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

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