CODEWITHSUNDEEP
cssgoogle-chromecss-animations
riv
riv

Reputation: 7324

CSS scale+animation blurs the image in Chrome

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 &amp; zoom in</span> | <span class="clicky try-2">Zoom in &amp; create</span>
<div class="div">
  <div class="pos">
  </div>
</div>

Upvotes: 0

Views: 681

Answers (2)

Deepak Kamat
Deepak Kamat

Reputation: 1980

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

Upvotes: 1

Moher
Moher

Reputation: 741

use this:

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

Upvotes: 1

Related Questions