0

I'm using a CSS matrix to allow panning and zooming within a container (this is handled by jquery.panzoom library)

Inside the container I'm using a CSS animation that is causing everything inside the container to be blurry in Chrome.

I tried the answer on this page but i don't see any difference.

This is a jsfiddle with a basic example of what's going on.

Basically the problem is this CSS rule: 

.outer .effect {
-webkit-animation: sonarEffect 1.3s infinite 75ms;
-moz-animation: sonarEffect 1.3s infinite 75ms;
animation: sonarEffect 1.3s infinite 75ms;
}

if you inspect the .effect element and toggle it's visibility you can clearly see that when invisible everything looks sharp and then blurry when turning its visibility on.

Community
  • 1
  • 1
jorgehmv
  • 3,633
  • 3
  • 25
  • 39

1 Answers1

1

Currently, the effect scales up beyond 100%. It is better to start the effect at 50% and have it finish at 100%.

For example, if we wanted to scale something from 100px to 200px. It would be best to have the element start at 200px and scale it down to 50% and than have it animate to 100%. Scaling past 100% can achieve blurry effects.

Related answer: CSS @keyframes scale text blurry

However, most of the blurry nature of that is caused by the -webkit-transform: matrix(... on the .container element in the CSS. If you scale things up, quality will be lost...

Here is an example (http://jsfiddle.net/MZf6D/1/). You will have to modify it to fix your needs but, should get you started on the right path.

.container{
    width: 300px;
    position: relative;
}

.outer {
    background: #fff;
    -webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
    -moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
    transition: transform ease-out 0.1s, background 0.2s;
    border: 5px solid #e373ff;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    position:absolute;
    right:50px;
    top:0;
}
.outer .border {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    height: 84px;
    width:84px;
    border: 5px solid #fff;
    background: #c22ce2;
    padding: 3px;
}
.outer .effect {
    -webkit-animation: sonarEffect 1.3s infinite 75ms;
    -moz-animation: sonarEffect 1.3s infinite 75ms;
    animation: sonarEffect 1.3s infinite 75ms;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    position: absolute;
    left: -25%;
    top: -25%;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5);
}
@-webkit-keyframes sonarEffect {
    0% {
        opacity: 0.2;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 1px rgba(255,255,255,7), 0 0 4px 4px #c22ce2, 0 0 0 4px rgba(255,255,255,0.5);
    }
    100% {
        box-shadow: 0 0 0 1px rgba(255,255,255,7), 0 0 4px 4px #c22ce2, 0 0 0 4px rgba(255,255,255,0.5);
        -webkit-transform: scale(1);
        opacity: 0;
}

}
@-moz-keyframes sonarEffect {
    0% {
        opacity: 0.2;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 1px rgba(255,255,255,7), 0 0 4px 4px #c22ce2, 0 0 0 4px rgba(255,255,255,0.5);
    }
    100% {
        box-shadow: 0 0 0 1px rgba(255,255,255,7), 0 0 4px 4px #c22ce2, 0 0 0 4px rgba(255,255,255,0.5);
        -moz-transform: scale(1);
        opacity: 0;
    }
}
@keyframes sonarEffect {
    0% {
        opacity: 0.2;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 1px rgba(255,255,255,7), 0 0 4px 4px #c22ce2, 0 0 0 4px rgba(255,255,255,0.5);
    }
    100% {
        box-shadow: 0 0 0 1px rgba(255,255,255,7), 0 0 4px 4px #c22ce2, 0 0 0 4px rgba(255,255,255,0.5);
        transform: scale(1);
        opacity: 0;
    }
}

img{
    width:30%;
    height: 30%;
}
Community
  • 1
  • 1
Jason
  • 4,079
  • 4
  • 22
  • 32