ZoomIn and zoomOut a element using javascript for all browsers

Question

I want to implement a zoom in, zoom out function for an element in my web page it should be worked on all browsers. I have done some code but it's not working on firefox because I have given CSS zoom for scaling. Here my code

var currentZoom = 1.0;
var zoomElement = $('.ci-journey-interactions-canvas__row');
$('#btn_ZoomIn').click(
    function () {
    $("body").addClass("zoom-active");
    if ($(zoomElement).css('zoom') >= 1.75) {
        alert('Maximum zoomin')
    } else {
        $(zoomElement).animate({
            'zoom': currentZoom += .25,
        }, {
            'complete': zoomInCallback()
        }, 'fast');
    }
});

How could i make this all browser compatible?

Answer 1

you can manipulate the CSS "transform: scale(1.5)" in javascript, and use a container div with overflow:hidden so that the element doesn't take extra space. you will also need to handle left and top positions on inside element to keep it centered.