CSS scale+animation blurs the image in Chrome - css

Question

I have a large element that has multiple animated (rotating) images, and you can zoom in and out on the entire div (which changes its scale transform). However, if an image element is created while the div is zoomed out, when I zoom back in I can see that the image is very blurry, as if it the image was downscaled when the element was created. A possible workaround would be to hide & show the image every time I zoom, but that doesn't sound like the best solution.
Here's a snippet demonstrating the issue (fiddle). Click on the first link to get a blurred image (sometimes only breaks on the second click), and on the second link to get a good image.
$(".try-1").click(function() {
$(".image").remove();
$(".pos").css("transform", "scale(0.4)").append("<div class=\"image\"></div>");
setTimeout(() => {
$(".pos").css("transform", "scale(1.4)");
}, 500)
});
$(".try-2").click(function() {
$(".image").remove();
$(".pos").css("transform", "scale(1.4)").append("<div class=\"image\"></div>");
});
.clicky {
color: #00f;
cursor: pointer;
}
.clicky:hover {
text-decoration: underline;
}
.div {
position: relative;
width: 500px;
height: 500px;
background: #000;
}
.pos {
position: absolute;
left: 250px;
top: 250px;
}
#keyframes rotating-cw {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.image {
position: absolute;
left: -150px;
top: -150px;
width: 300px;
height: 300px;
background: url(http://i.imgur.com/grJ6I3k.png);
background-size: 300px 300px;
animation: rotating-cw 30s linear infinite;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="clicky try-1">Create & zoom in</span> | <span class="clicky try-2">Zoom in & create</span>
<div class="div">
<div class="pos">
</div>
</div>

Answer 1

use this:
.pos {
-webkit-perspective: 1000;
position: absolute;
left: 250px;
top: 250px;
}

Answer 2

This can be solved using requestAnimationFrame but a simpler and more straightforward solution is to tell the browser to again initialize the image's container
$(".try-1").click(function() {
$(".image").remove();
$(".pos").css("transform", "scale(0.4)").append("<div class=\"image\"></div>");
setTimeout(() => {
$(".pos").css("transform", "scale(1.4)");
// Here, after we scale up the element again append
// the .image element but first remove it
$(".image").remove();
$(".pos").append("<div class=\"image\"></div>");
}, 500)
});
JsFiddle