keyframes support older ios webkit

styled-components · Apr 20, 2017 · 7c5e97b · 7c5e97b
1 parent 474ae32
commit 7c5e97b
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,7 @@ All notable changes to this project will be documented in this file. If a contri
 - Add FlatList, SectionList & VirtualizedList support, thanks to @Kureev(https://github.com/Kureev). (see [#662](https://github.com/styled-components/styled-components/pull/662))
 - Removed dependency on `glamor` and migrated remaining references to the internval vendored `glamor` module. (see [#663](https://github.com/styled-components/styled-components/pull/663))
 - Fix missing autoprefixing on GlobalStyle model. (see [#702](https://github.com/styled-components/styled-components/pull/702))
+- Better support for `keyframes` on older iOS/webkit browsers (see [#720](https://github.com/styled-components/styled-components/pull/720))
 
 ## [v1.4.4] — 2017-03-01
 

diff --git a/src/constructors/keyframes.js b/src/constructors/keyframes.js
@@ -12,6 +12,8 @@ export default (nameGenerator: NameGenerator) =>
     const hash = hashStr(replaceWhitespace(JSON.stringify(rules)))
     const name = nameGenerator(hash)
     const keyframes = new GlobalStyle(rules, `@keyframes ${name}`)
+    const keyframesWebkit = new GlobalStyle(rules, `@-webkit-keyframes ${name}`)
     keyframes.generateAndInject()
+    keyframesWebkit.generateAndInject()
     return name
   }
diff --git a/src/constructors/test/keyframes.test.js b/src/constructors/test/keyframes.test.js
@@ -48,6 +48,14 @@ describe('keyframes', () => {
           opacity: 1;
         }
       }
+      @-webkit-keyframes keyframe_0 {
+        0% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 1;
+        }
+      }
     `, { styleSheet })
   })
 })