I am trying to scale screen using a scale factor if a zoom event is triggered. While, I am doing the same if the screen is resized instead but this scaling uses a different scale factor. However, if both of these events are triggered one after another or together, the screen doesn’t scale at all. For example, if my screen is zoomed in and I try to resize it then neither screen is not scaled by either scale factors. Is it possible to overcome this? This is my code, I have similar if conditions of resize screen and for zooming.

if (isZoomedIn() === true) {
    var scaleFactorZoomIn = window.screen.width / document.documentElement.clientWidth;
    transformScreen(scaleFactorZoomIn);
 }
if ( isMaximized() === true) {
var scaleFactorMax = origTdh.screenWidth / origTdh.clientWidth;
transformScreen(scaleFactorMax);
}
function transformScreen(scaleFactor: number) {
  var root = document.querySelector(":root") as HTMLElement;
  root.style.transform = "scale(" + 1 / scaleFactor + ")";
  root.style.setProperty("-o-transform", "scale(" + 1 / scaleFactor + ")");
  root.style.setProperty("-webkit-transform", "scale(" + 1 / scaleFactor + ")");
  root.style.setProperty("-moz-transform", "scale(" + 1 / scaleFactor + ")");
}

I tried calling a resetTransformation function everytime before I transform screen like this:

function resetTransformation() {
  var root = document.querySelector(":root") as HTMLElement;
  root.style.transform = "none";
  root.style.setProperty("-o-transform","none");
  root.style.setProperty("-webkit-transform", "none");
  root.style.setProperty("-moz-transform", "none");
}

However, this doesn’t work.