Почему функции увеличения и уменьшения не работают должным образом в Firefox с использованием jquery?

Question

Я увеличиваю масштаб, и мы используем jquery при нажатии кнопки.

Пожалуйста, проверьте скриншот: https://nimb.ws/ZSxTbW

в Chrome работает нормально, но в Firefox не работает должным образом и имеет пустое пространство по всему дизайну.

Пожалуйста, проверьте скриншот: https://nimb.ws/SeX0sw

Пожалуйста, помогите мне сократить его.

Вот мой код:

$('#In').on('click', function () {
    if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6) {//Firefox  
        var step = 0.02;
        currFFZoom += step;
        $('body').css('MozTransform', 'scale(' + currFFZoom + ')');
        save_zoom_level(currFFZoom);
    } else {
        var step = 2;
        currIEZoom += step;
        $('body').css('zoom', ' ' + currIEZoom + '%');
        save_zoom_level(currIEZoom);
    }
});

$('#Out').on('click', function () {
    if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6) {//Firefox  
        var step = 0.02;
        currFFZoom -= step;
        $('body').css('MozTransform', 'scale(' + currFFZoom + ')');
        save_zoom_level(currFFZoom);

    } else {
        var step = 2;
        currIEZoom -= step;
        $('body').css('zoom', ' ' + currIEZoom + '%');
        save_zoom_level(currIEZoom);
    }
});

Answer 1

Я не думаю, что вам нужно делать столько проверок.свойство transform: scale(1.5) должно работать во всех браузерах без префикса поставщика.

Вы можете сделать что-то вроде следующего.

function zoomIn() {
  var element = document.getElementById("content");
  element.classList.add("zoomIn");
}

function zoomOut() {
 var element = document.getElementById("content");
  element.classList.remove('zoomIn').add("zoomOut");
}

.content {
  width: 200px;
  height: 200px;
  background: #eab600;
  margin-top: 50px;
}

.zoomOut {
  transform: scale(0.9);
}

.zoomIn {
  transform: scale(1.5);
}

  <button onclick="zoomIn()">Zoom In</button>
  <button onclick='zoomOut()'>Zoom Out</button>
  
  <div id='content' class='content'></div>