Zooming in without changing center of screen for firefox

Question

The following page has some useful information about zooming in using css/javascript:

How can I scale an entire web page with CSS?

However, when I try to implement it it works better for chrome than firefox, as firefox moves my content to the top of the screen and causes (horizontal) overflow problems:

var current_zoom = 1;

function zoom_in(){
  current_zoom += .1;
  document.body.style.zoom = current_zoom;  
  document.body.style.MozTransform = "scale(" + current_zoom + ")";  
}
function zoom_out(){
  current_zoom -= .1;
  document.body.style.zoom = current_zoom;  
  document.body.style.MozTransform = "scale(" + current_zoom + ")";  
}

document.getElementById("zoom_in_btn").onclick = zoom_in;
document.getElementById("zoom_out_btn").onclick = zoom_out;

#calibration_card{
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin:auto;
  width:310px;
  height:190px;
  padding:5px;
  border-style: solid;
  border-radius: 20px;
  color:red;
}

<div id="calibration_card">
  <div>Please zoom in or out until the card on the screen is the same size as a typical card in your wallet by pressing the + and - buttons below</div>

  <div>Please do not use a bank card or driving license for this sort of check</div>
  <div>Once the screen card is as close as possible to your card, please press "Proceed"</div>
  <button class="btn btn-primary" id="zoom_in_btn">+</button>
  <button class="btn btn-primary" id="zoom_out_btn">-</button>
  <button class="btn btn-primary" onclick="Trial.submit()">Proceed</button>
</div>

<input type="hidden" id="calibration_zoom" name="calibration_zoom"/>

Are there simple fixes for firefox?

Answer 1

Yes, there's a simple fix in firefox:

add this to your css html,body {height: 100%;width: 100%;}

Longer version:
The zoom CSS property is not supported by firefox it will not work at all so the fallback in this script is to use scale instead. So actually you are scaling the body element who doesn't have height but have a width, it's only normal that it will grow in width and make it overflows. Also, it's popping your content to the top because it's trying to centre it to the height of the container which is 0 as I said before.

Bonus:
You can use just scale and it will work for both chrome and firefox and it will be a lot more compatible with browsers.

var current_zoom = 1;

function zoom_in(){
  current_zoom += .1;
  document.body.style.transform = "scale(" + current_zoom + ")";
}
function zoom_out(){
  current_zoom -= .1;
  document.body.style.transform = "scale(" + current_zoom + ")";
}

document.getElementById("zoom_in_btn").onclick = zoom_in;
document.getElementById("zoom_out_btn").onclick = zoom_out;

html,body {
  height: 100%;
  width: 100%;
}
      
#calibration_card{
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin:auto;
  width:310px;
  height:190px;
  padding:5px;
  border-style: solid;
  border-radius: 20px;
  color:red;
}

<div id="calibration_card">
  <div>Please zoom in or out until the card on the screen is the same size as a typical card in your wallet by pressing the + and - buttons below</div>

  <div>Please do not use a bank card or driving license for this sort of check</div>
  <div>Once the screen card is as close as possible to your card, please press "Proceed"</div>
  <button class="btn btn-primary" id="zoom_in_btn">+</button>
  <button class="btn btn-primary" id="zoom_out_btn">-</button>
  <button class="btn btn-primary" onclick="Trial.submit()">Proceed</button>
</div>

<input type="hidden" id="calibration_zoom" name="calibration_zoom"/>