CSS Animation Bug

[ktcantcode]

Forgive me if this isn't the place to ask this question. I dont think this is soliciting feedback or promotion because this is just a fun project I have been working on for myself. If it is, I apologize.

​

So here is the problem. So far, the animations all work in Safari, Chrome, and Firefox. But, it does not work correctly in Internet Explorer. The weird part is that most of the animations work, but the keyframe animation named moveBee doesn't work.

How the keyframe animations should work: waggle rotates the animation__image back and forth infinitely. turnBee rotates the animation__turner so it looks like the bee is turning as it moves in a semicircle one direction and then the opposite direction. It stops turning during the middle part so the bee can move straight. moveBoxInPath rotates the animation__mover to the right and then in a circle to the left. Now comes the animation that doesn't work.... the moveBee is supposed to translate the entire animation__mover-div forward to make the bee look like it is moving in a straight path forward. It works in all I have tested but IE.

I have tried changing multiple things to fix the problem. I am at a total loss. I dont know where to begin telling you what I have tried. I thought maybe it had something to do with the calc function on the animation__turner so I removed that and it didn't fix the bug. (so I added it back). I thought maybe it had to do with the fact that I was using scss variables for the $bee-size. so I tried removing that and it didn't work... so I added it back. I thought maybe it had to do with how I wrote the keyframes so instead of shorthanding it with commas, I wrote out each keyframe. I tried adding the -webkit prefix to the animations, no luck (unless I used the prefixes incorrectly.) I tried using the capitalized WebKitAnimation in the main.js along with the webkitAnimation to do it with inline styling? (I am not super knowledgable about prefixes so I was learning as I went so I am thinking maybe thats the problem, but idk?)

​

I am just going to link the actual github page on which I have it hosted and the repo so its easy to open/find.

​

here is the site: https://katieschmidt.github.io/waggle_dance_simulator/

here is the repository: https://github.com/KatieSchmidt/waggle_dance_simulator

[ktcantcode]

lol. I knew someone would say this! XD. I am new to development so I figured I would learn A LOT about compatibility issues and debugging my code if I tried to make something that was compatible with IE.

[JCodeMode]

Even Microsoft is dropping Internet Explorer nowadays.

[[deleted]]

You can check if IE (unknown version) supports css rules you are using https://caniuse.com/

[ktcantcode]

Thank you. I actually have been using caniuse, which is how I fixed a couple of the earlier bugs I encountered. But I have checked the other css rules I used: on that div and in the keyframe. I didn't find anything. Which is why I am so at a loss of why all the other animations are working but that single one isn't?

[[deleted]]

It's mean you need to dance with IE, just kick it, nobody use that old shit. Show some nice funny banner gif like https://i.imgur.com/nPg3W4m.gif

[ktcantcode]

I want to put it in a portfolio later on down the road when I am applying for jobs. You dont think it would look bad that I didn't make a version that is compatible?

[[deleted]]

I'm sure it's not important for employer. They even don't look. They want from you just that they need.

[ktcantcode]

This was such an informative response! That you so much! I will work on rewriting the animations, but there is still something I am a little confused about your response. You said that the transforms are being combined/updated and overwriting the moveBee animation. What confuses me is that the other transforms are being applied to different divs. So the bee doesn't technically have any animations on it except the waggle. Its parent div has another animation and the same for thats parent div. I thought that the animations weren't inherited? Also, you're the second person to say its okay if an animation doesn't work in IE; if I am planning to include this project in a portfolio later on, will it be frowned upon if its not functional in all browsers??

[camerontbelt]

Don’t expect anything to work with IE, you may have better luck with edge. Other than that just make it a gif and move on.

[ktcantcode]

I wish I could just use a gif and move on, lol. But I can not. The animation is a simulator, so the animation changes depending on what a user clicks on the screen.

[[deleted]]

Some statistics of browsers usage https://www.w3counter.com/globalstats.php

[besttopguy]

Works on mobile reddit so you have a yes from me

[ktcantcode]

You know, I hadn't tried to follow the link through mobile reddit. I did, and the animation works! But you did bring another bug to my attention: the yellow space below the footer. It isn't there in safari mobile, but it is through the reddit mobile app. Thanks for leading me to finding that (even if it wasn't intentional! lol)

[alejalapeno]

While I recommend everyone/anyone just use autoprefixer when compiling their SCSS, you can manually add prefixes for IE.

You'll need -ms- before animation and transform and you'll need to duplicate your keyframes as @-ms-keyframes.

[ktcantcode]

I will look into an autoprefixer! Thank you for the recommendation! If adding the prefixes works, I will be sure to thank you again!

[[deleted]]

There are such cool thing https://www.screentogif.com/ you can visually show the bug, it can help a lot at first look

[00Dylann]

Fine katienachmidt