Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

keyframes/animations not working in IE11

See original GitHub issue

I have a simple CSS animation in a component using the keyframes helper. The animations work in all browsers except IE11, where they simply do not run. IE gives no error.

Environment

## System:
 - OS: macOS 10.14.5
 - CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
 - Memory: 141.27 MB / 16.00 GB
 - Shell: 5.6.2 - /usr/local/bin/zsh
## Binaries:
 - Node: 8.11.4 - ~/.nvm/versions/node/v8.11.4/bin/node
 - Yarn: 1.15.2 - ~/.nvm/versions/node/v8.11.4/bin/yarn
 - npm: 6.5.0 - ~/.nvm/versions/node/v8.11.4/bin/npm
## npmPackages:
 - styled-components: ^4.2.0 => 4.2.1

Reproduction

Relevant code is in this file: https://github.com/joeattardi/react-snackbar-alert/blob/master/src/Snackbar.js

Steps to reproduce

Add some keyframes using the keyframes helper
Use those keyframes in an animation in a styled component further down in the file
View page in IE11

Expected Behavior

Animations run

Actual Behavior

Animations do not run

Issue Analytics

State:
Created 4 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

probablyupcommented, Jun 3, 2019

Remade it in another client that supports IE11 and the animation seems fine: https://stackblitz.com/edit/react-q8xss1

Might just be your setup.

1reaction

probablyupcommented, Jun 3, 2019

Please provide a codesandbox 😃

On Mon, Jun 3, 2019 at 3:10 PM Joe Attardi notifications@github.com wrote:

I have a simple CSS animation in a component using the keyframes helper. The animations work in all browsers except IE11, where they simply do not run. IE gives no error. Environment

System:

OS: macOS 10.14.5

CPU: (8) x64 Intel® Core™ i7-4980HQ CPU @ 2.80GHz

Memory: 141.27 MB / 16.00 GB

Shell: 5.6.2 - /usr/local/bin/zsh

Binaries:

Node: 8.11.4 - ~/.nvm/versions/node/v8.11.4/bin/node

Yarn: 1.15.2 - ~/.nvm/versions/node/v8.11.4/bin/yarn

npm: 6.5.0 - ~/.nvm/versions/node/v8.11.4/bin/npm

npmPackages:

styled-components: ^4.2.0 => 4.2.1

Reproduction

Relevant code is in this file: https://github.com/joeattardi/react-snackbar-alert/blob/master/src/Snackbar.js Steps to reproduce

Add some keyframes using the keyframes helper

Use those keyframes in an animation in a styled component further down in the file

View page in IE11

Expected Behavior

Animations run Actual Behavior

Animations do not run

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/styled-components/styled-components/issues/2594?email_source=notifications&email_token=AAELFVWZSCMLMOFZYZRZEMTPYV3EDA5CNFSM4HSQYNIKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4GXL4SIA, or mute the thread https://github.com/notifications/unsubscribe-auth/AAELFVQGESAYKJCOFJIWJ7TPYV3EDANCNFSM4HSQYNIA .