Animation Transform "blurring" svg while animating

Question

I’m having a problem making an animation where I have one circle in svg and I need to make it go up to cover the entire screen, like a FAB which transforms into a div, I’ve done an animation of this but with a lot of fun background-size and background-position.

The simplest and best performing mode was using transform: scale();, was the way I wanted but here comes the problem, Firefox worked perfectly, but in Chrome (and Opera I’m using) svg is 'blurred' so to say while the scale.
There is some way to fix this even if you have to use some js library or something like that, because I’ve tried everything I know and nothing helped. Follow the code I’m using.

$(document).ready(function() {
  $(".btn").click(function () {
        svg = $(this);
        if(svg.attr("class") == "btn active") {
            svg.attr("class", "btn");
        }
        else {
            svg.attr("class", "btn active");
        }
  });
})

.btn {
            fill: #1dc7ff;
            width: 3.5rem;
            height: 3.5rem;
            border-radius: 50%;
            cursor: pointer;
            position: fixed;
            right: 1rem;
            bottom: 1rem;
            transition: .05s;
        }
        .btn:active {
            transform: scale(.95);
            transition: 4s;
        }
        .btn.active {
            transform: scale(100);
            transition: 10s;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<svg class="btn">
    <circle cx="1.75rem" cy="1.75rem" r="1.75rem"></circle>
</svg>

Obs: I have tried to use the code below that I found in several forums but not solved:

svg {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1.0, 1.0);
  transform: translateZ(0);
}

Image of how it looks during animation:

Answer 1

Some browsers "overflow" the quality of the svg when increased its original size (e.g., Chrome).

One solution is to create a svg with original size equal to the largest scale you wanted and reduce it initially with the scale. So when clicked, it would grow up to the original size without loss of quality.

  $(document).ready(function() {
  $(".btn").click(function () {
        svg = $(this);
        if(svg.attr("class") == "btn active") {
            svg.attr("class", "btn");
        }
        else {
            svg.attr("class", "btn active");
        }
  });
})

.btn {
            fill: #1dc7ff;
            width: 80rem;
            height: 80rem;
            border-radius: 50%;
            cursor: pointer;
            position: fixed;
            right: -30rem;
            bottom: -37rem;
            transition: .05s;
            transform: scale(.01);
        }
        .btn:active {
            transform: scale(.95);
            transition: 4s;
        }
        .btn.active {
            transform: scale(100);
            transition: 100s;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg class="btn">
    <circle cx="40rem" cy="40rem" r="40rem"></circle>
</svg>