6

I am trying to create an animation of a balloon flying. All is weel in all modern browsers except IE11.

I am using translateX and translateY without any problem but scale is causing the image to become 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>

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

I have tried this trick which I have seen in several places but it made no difference.

-webkit-backface-visibility: hidden; 
-ms-transform: translateZ(0); /* IE 9 */
-webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
transform: translateZ(0);
Volker E.
  • 5,911
  • 11
  • 47
  • 64
R Reveley
  • 1,547
  • 3
  • 14
  • 33
  • It appears to be transform scale that is causing the blur. – R Reveley May 08 '17 at 11:51
  • Can you attach a screenshot? – Bram Vanroy May 09 '17 at 12:36
  • have you tried using the cssSandpaper library, as listed on caniuse.com? The url of the js is https://github.com/zoltan-dulac/cssSandpaper You may also find this other resource helpful http://www.useragentman.com/IETransformsTranslator/ (also listed on caniuse) – Rachel Gallen May 09 '17 at 22:48
  • Hi @RReveley can you see this codepen: https://codepen.io/anon/pen/jGzddY in IE to verify if the blur effect is gone? If yes, then I think the main issue with IE11 is that `transform3d` causes the gpu to handle acceleration, and IE11's hardware accelerated rendering produces blurry images. It's not a problem on Edge though. Was facing the same issue, but finding actual cause of the issue was hard. This is the closest I've come to rationalizing IE's behaviour. – kumarharsh Oct 09 '17 at 13:57

2 Answers2

0

Try changing all your translateX and translateY to translate3d like:

@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);}
}

do the same everywhere you have been using translates in your example. translate3d enables hardware acceleration which will help with animations. you can see this post for more info.

Carlos Valencia
  • 6,499
  • 2
  • 29
  • 44
  • I have updated the Codepen with your suggestion but it made no difference unfortunately. Thanks for the suggestion though. – R Reveley May 08 '17 at 11:23
  • when you try your codepen on IE11 do you still see the image blurred? i see it just fine on IE 11.0.10586 – Carlos Valencia May 08 '17 at 12:45
  • Still blurred. IE 11.873.10586.0 It appears to be the scale trnsform causing the trouble. – R Reveley May 08 '17 at 14:45
  • Actually, translate3d (and any other hw-accelerated transforms) cause blurry text in IE. Only the 2d-transforms produce sharp renders. – kumarharsh Oct 09 '17 at 13:51
0

You can use a fallback to IE-11 with the vendor prefix "-ms-transform".

for example:

.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%);
    }

See the answer here.

CSS3 transform:scale in IE

Community
  • 1
  • 1
Pablo Darde
  • 5,844
  • 10
  • 37
  • 55