Firefox: Is there any alternative to replace .css("zoom")

user_11863522 0
Viewed 1755

.css("zoom") is not working with Firefox and IE, but works fine on Chrome.

my code works only on chrome:

//ZoomIn Button
    $('.zoom--actions .zoom-in').on('click', function() {
        if ( $(".img-zoom").css("zoom")==1){
            $(".img-zoom").css("zoom", "125%");
        }
        else if ( $(".img-zoom").css("zoom")==0.75){
            $(".img-zoom").css("zoom", "100%");
        }
    });
firefox css html jquery javascript
1 Answers

CSS Zoom property, supported in IE 5.5+, Opera,Safari 4, and Chrome.

Firefox is the only major browser that does not support zoom, but you could use -moz-transform since Firefox 3.5.

div.zoom {
      zoom: 2; /* all browsers */
     -moz-transform: scale(2);  /* Firefox */
}

Let us solve this question.

Try this snippet.

$('.zoom--actions .zoom-in').on('click', function() {
  if ($(".img-zoom").css("zoom")==1 | $(".img-zoom").css({"-moz-transform":"scale(1)"})){
      $(".img-zoom").css("zoom", "125%").css({"-moz-transform":"scale(1.25)"});
  }
  else if (  $(".img-zoom").css("zoom")==0.75 | $(".img-zoom").css({"-moz-transform":"scale(0.75)"})){
      $(".img-zoom").css("zoom", "100%").css({"-moz-transform":"scale(1)"});
    
  }
});
.img-zoom{
  -moz-transform: scale(1);
  zoom:1;
}
.zoom--actions{
  margin:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="zoom--actions">
  <button class="zoom-in">Zoom</button>
  <img class="img-zoom" src="https://css-tricks.com/wp-content/themes/CSS-Tricks-17/images/browser-logos/chrome_64x64.png">
</div>

user_133686580
Related