@keyframe not working in IE10
- Dominant language
- JavaScript
- Stars
- 5.3k
- Forks
- 187
- PR merge metrics
- No merged PRs in 30d
Description
I'm noticing an issue with the animation features of aphrodite, and IE10 (have confirmed that it works in IE11, and all modern browsers).
Essentially, it seems like the `@keyframe` declarations aren't being picked up by IE10 when inlined by aphrodite. For example, if I log the output of the `injectStyleTag()` and use the generated animation declaration to manually set it inline in the html (i.e. not use aphrodite), it works fine (example below). If I let aphrodite do it, it does not work.
```html
// This works:
@keyframes keyframe_jj70bv{
0% {
opacity:0;
-webkit-transform:translate3d(0, 2000px, 0);
-ms-transform:translate3d(0, 2000px, 0);
transform:translate3d(0, 2000px, 0);
}
100% {
opacity:1;
-webkit-transform:none;
-ms-transform:none;
transform:none;
}
}
.slideUp_1odhk6h{
-webkit-animation-name: keyframe_jj70bv;
animation-name: keyframe_jj70bv;
}
```
Some thoughts: I'm checking to see if it's a problem with adding @keyframe after initial page load, or if it's an issue with how it's minified.
Unfortunately, haven't had more time to debug issue. Let me know if there is any more information I can provide.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reproducing the animation in IE10 and comparing the output from injectStyleTag() with the manually added style block shown in the issue. Investigate whether dynamically adding the @keyframes declaration or its minification differs, and consider the issue done when Aphrodite-injected keyframes work in IE10 as the manual declaration does.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100