Ie11 Translate Blurry Image

I am trying to create a balloon animation. Everything works in all modern browsers except IE11.

I use translateX and translating without any problems, but scaling makes the image blurry.

@media (min-width: 1100px) {
	.balloon-outer,
	.balloon-inner,
	.balloon {
		height: 100%;
		position: absolute;
		width: 100%;
		bottom: 0;
		right: 0;
		animation-duration: 60s;
		animation-delay: 0;
		animation-iteration-count: infinite;
		animation-direction: normal;
		will-change: transform;
		pointer-events: none;
	}
	.balloon-outer {overflow-y: hidden;
		transform-origin: 50% 50%;
		animation-name: travel-x;
		animation-timing-function: ease-in;
		transform: translateX(-20%);
	}
	.balloon {
		transform-origin: 50% 50%;
		animation-name: travel-y;
		animation-timing-function: ease-out;
		transform: translateY(90%);
	}
	.balloon-inner {background:url("https://www.inty.com/wp-content/uploads/balloon.png") no-repeat scroll 100% 100% / auto 40%;
		transform-origin: 100% 100%;
		animation-name: scale;
		animation-timing-function: linear;
		transform: scale(3);
	}
}

	@keyframes scale { 
		0% {transform: scale(3);}
		80% {transform: scale(0);}
		100% {transform: scale(0);}
	}
	@keyframes travel-x { 
		0% {transform: translateX(-10%);}
		80% {transform:translateX(-45%);}
		100% {transform:translateX(-45%);}
	}
	@keyframes travel-y { 
		0% {transform: translateY(120%);}
		80% {transform:translateY(-70%);}
		100% {transform:translateY(-70%);}
	}
<div class="balloon-outer"><div class="balloon"><div class="balloon-inner"></div></div></div>
Run codeHide result

http://codepen.io/rachelreveley/pen/xdLGEO

I tried this trick, which I saw in several places, but it didn’t matter.

-webkit-backface-visibility: hidden; 
-ms-transform: translateZ(0); /* IE 9 */
-webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
transform: translateZ(0);
+4
source share
2 answers

Try changing all of your translateXand translateYon translate3das follows:

@keyframes travel-x { 
    0% {transform: translate3d(-10%,0,0);}
    80% {transform:translate3d(-45%,0,0);}
    100% {transform:translate3d(-45%,0,0);}
}
@keyframes travel-y { 
    0% {transform: translate3d(0,120%,0);}
    80% {transform:translate3d(0,-70%,0);}
    100% {transform:translate3d(0,-70%,0);}
}

, translates . translate3d , . .

0

IE-11 "-ms-transform".

:

.balloon-outer {overflow-y: hidden;
        transform-origin: 50% 50%;
        animation-name: travel-x;
        animation-timing-function: ease-in;
        transform: translateX(-20%);
        -ms-transform: translateX(-20%);
    }

. .

CSS3: IE

0

Source: https://habr.com/ru/post/1676378/


All Articles