CSS transform scale property

Question

I have a big problem. I try to resize all fonts on my page. This code below works fine in EDGE / CHROME, but not in FF :/ I have no clue whats the problem with that code...

$('#zoom_in').click(function() {
 $('body').css({
 '-moz-transform': 'scale(1.5, 1.5)', /* Moz-browsers */
 'zoom': 1.5, /* Other non-webkit browsers */
 'zoom': '150%' /* Webkit browsers */
 });
});
$('#zoom_reset').click(function() {
 $('body').css({
 '-moz-transform': 'scale(1.0, 1.0)', /* Moz-browsers */
 'zoom': 1.0, /* Other non-webkit browsers */
 'zoom': '100%' /* Webkit browsers */
 });
});

Thanks in advance!

Answer 1

$('#zoom_in').click(function() {
 $('body').css({
 'font-size' : '150%',
 'zoom': 1.5, /* Other non-webkit browsers */
 'zoom': '150%' /* Webkit browsers */
 });
});
$('#zoom_reset').click(function() {
 $('body').css({
 'font-size' : '100%',
 'zoom': 1.0, /* Other non-webkit browsers */
 'zoom': '100%' /* Webkit browsers */
 });
});

body{
 margin:0;
 padding:0;
 text-align:center;
 transition: all 1s ease;
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -ms-transition: all 1s ease;
 font-size:100%;
}
button{
padding:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button id="zoom_in">Zoom In</button>
<button id="zoom_reset">Zoom Reset</button>
<p>
 Some Text
</p>

It works fine in my Mozilla Browser. Kindly check this code. Hope this helps.

• daru79: But look what is happening to the content -> it goes out of the edge of the window... how to solve that problem?