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?

Hi! Beware, that link is 10 years old. You have other functionalities now that you may be able to use such as transform: scale and transform origin that may be helpful — Ale Plo, Oct 18 '20 at 22:55

Oussama Bouthouri · Accepted Answer · 2020-10-19T03:17:02.793

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"/>

Thanks, I think this will do the trick! However, it seems that part of the way this works is causing a strange distribution of the page content (as reflected by the scrollbars on the right and bottom). Can this distribution be addressed? — beepingbopping, Oct 19 '20 at 18:17
I feel what's missing is something that automatically shrinks the width of the body to reflect the zoom. I'm making a slightly different answer below that uses the window width to address this issue — beepingbopping, Oct 20 '20 at 12:32

beepingbopping · Answer 2 · 2020-10-20T12:45:00.673

Slight variant on the above answer ONLY IF YOU ARE USING THE ENTIRE BROWSER WIDTH AND HEIGHT and want to avoid the dimensions of the page increasing in firefox when you zoom in:

var current_zoom = 1;

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

  // the below stops the screen from growing in width and height
  document.body.style.width  = window.innerWidth / current_zoom
  document.body.style.height = window.innerHeight / current_zoom
  document.body.style.transformOrigin = "left top"
}
function zoom_out(){
  current_zoom -= .1;
  document.body.style.transform = "scale(" + current_zoom + ")";

  // the below stops the screen from growing in width and height
  document.body.style.width  = window.innerWidth / current_zoom
  document.body.style.height = window.innerHeight / current_zoom
  document.body.style.transformOrigin = "left top"

}

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"/>

Zooming in without changing center of screen for firefox

2 Answers2