CODEWITHSUNDEEP
jquerycsssvg
Dawid
Dawid

Reputation: 593

scaling workaround ? scaling issues

https://jsfiddle.net/gubLwvkt/

#icon-wrap:hover {
    animation: animation 1000ms linear both;
}

after the animation, the picture (even tried it before with a .svg) is in lower resolution

is there a way to work it around ? what i like about these particular keyframes is that the div doesn't mess with the objects it's close to

the only workaround i found was abandoning keyframes and using a transition with size change (but that causes other problems though)

@edit I've got to add that in Firefox it's just fine. In Opera it's in lowquality for a few sec and it adjusts. Internet Explorer is just fine. enter image description here

Upvotes: 1

Views: 30

Answers (1)

KAD
KAD

Reputation: 11122

Chrome seems to view the backface when rendering the image since you got to use 3D transformation, you can fix this by setting the backface visibility to hidden for webkit :

#icon-wrap img {
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
}

https://jsfiddle.net/gubLwvkt/1/

Upvotes: 1

Related Questions