1

I found the animation below for a screensaver I'd like to use for digital signage. Problem is, it wont work with IE11, the only browser supported on the target system.

What needs to be changed to make it work? I can't find on caniuse.com what feature isn't working in IE.

Codepen: https://codepen.io/scottkellum/pen/BoZvjR

IE11 Debug Link: https://s.codepen.io/scottkellum/debug/BoZvjR

Code with SCSS removed:

body {
  margin: 0;
}

img, div {
  width: 100px;
  height: 100px;
}

.x {
  animation: x 13s linear infinite alternate;
}

.y {
  animation: y 7s linear infinite alternate;
}

@keyframes x {
  100% {
    transform: translateX( calc(100vw - 100px) );
  }
}

@keyframes y {
  100% {
    transform: translateY( calc(100vh - 100px) );
  }
}
<div class="x">
  <img class="y" src="https://blog.codepen.io/wp-content/uploads/2012/06/Button-Black-Large.png" alt="codepen" />
</div>

If it isn't possible to use that exact way, is there another way to bounce an image around the screen?

EDIT: I can't finde the solution in the proposed answer of CSS3 animation is not working in IE11 but works in other browsers: There is no running statement in the animation, I tried adding the overflow:visible and the containers don't change size.

meilon
  • 693
  • 1
  • 6
  • 20
  • 3
    https://stackoverflow.com/questions/34809544/css3-animation-is-not-working-in-ie11-but-works-in-other-browsers this should help you get through it. – Nikhil Kinkar Oct 04 '18 at 06:17
  • Possible duplicate of [CSS3 animation is not working in IE11 but works in other browsers](https://stackoverflow.com/questions/34809544/css3-animation-is-not-working-in-ie11-but-works-in-other-browsers) – לבני מלכה Oct 04 '18 at 06:45
  • Skip working in IE. Less than 4% of all browsers are either IE or Edge (Edge is better than IE). https://www.w3schools.com/browsers/ – Simon Jensen Oct 04 '18 at 07:19
  • I would if I could. Like I wrote, it's for digital signage and it only uses IE as its browser engine – meilon Oct 04 '18 at 07:28

1 Answers1

0

I found it out, I looked up every CSS3 function on icanuse.com again, and it turns out, calc() doesn't work inside transform in IE10, IE11, and Edge < 14.

I can live with the workaround of setting the screen dimensions manually (it's for digital signage and the screen will always be shown on full HD)

meilon
  • 693
  • 1
  • 6
  • 20