From 7c5e97bd2add9a0dbab4a1a37833bfc2b7a65075 Mon Sep 17 00:00:00 2001
From: Ty <ty@dice.fm>
Date: Thu, 20 Apr 2017 15:23:24 +0100
Subject: [PATCH] keyframes support older ios webkit

---
 CHANGELOG.md                            | 1 +
 src/constructors/keyframes.js           | 2 ++
 src/constructors/test/keyframes.test.js | 8 ++++++++
 3 files changed, 11 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c74bf5068..ff3f21985 100644
--- 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
index 0bba0808a..b29e145eb 100644
--- 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
index 955b2b8b6..1836428eb 100644
--- 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 })
   })
 })