From 6d46f3863c8aeb20cfcc24f0ae2ba4c3da833231 Mon Sep 17 00:00:00 2001
From: Sam Walsh <web@samwalsh.co.nz>
Date: Thu, 10 May 2018 11:04:37 +1200
Subject: [PATCH 1/3] Safari and iOS transparency workaround

Introduction of `primaryOpacity` and `secondaryOpacity`
---
 README.md    | 23 +++++++++++++++++++++++
 src/Wrap.js  |  6 +++---
 src/index.js |  4 ++++
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 4d6e2a01..0d663067 100755
--- a/README.md
+++ b/README.md
@@ -69,6 +69,8 @@ const MyLoader = () => (
 | **preserveAspectRatio** | `{String}`  | `xMidYMid meet`  | Aspect ratio option of `<svg/>`                            |
 | **primaryColor**        | `{String}`  | `#f3f3f3`        | Background                                                 |
 | **secondaryColor**      | `{String}`  | `#ecebeb`        | Animation color                                            |
+| **primaryOpacity**      | `{Number}`  | `1`              | Background opacity (0 = transparent, 1 = opaque)           |
+| **secondaryOpacity**    | `{Number}`  | `1`              | Animation opacity (0 = transparent, 1 = opaque)            |
 | **style**               | `{Object}`  | `null`           | Ex: `{ width: '100%', height: '70px' }`                                |
 | **uniquekey**           | `{String}`  | random unique id | Use the same value of prop key, that will solve inconsistency on the SSR. |
 
@@ -171,3 +173,24 @@ Run the storybook to see your changes
 ## License
 
 [MIT](/~https://github.com/danilowoz/react-content-loader/blob/master/LICENSE)
+
+## Known Issues
+
+* **Safari / iOS**
+      
+  When using `rgba` as a `primaryColor` or `secondaryColor` value, [Safari does not respect the alpha channel](/~https://github.com/w3c/svgwg/issues/180), meaning that the color will be opaque. To prevent this, instead of using an `rgba` value for `primaryColor`/`secondaryColor`, use the `rgb` equivalent and move the alpha channel value to the `primaryOpacity`/`secondaryOpacity` props.
+  
+  ```jsx
+  {/* Opaque color in Safari and iOS */}
+  <ContentLoader 
+    primaryColor="rgba(0,0,0,0.06)" 
+    secondaryColor="rgba(0,0,0,0.12)">
+  
+
+  {/* Semi-transparent color in Safari and iOS */}
+  <ContentLoader 
+    primaryColor="rgb(0,0,0)"
+    secondaryColor="rgb(0,0,0)"
+    primaryOpacity={0.06}
+    secondaryOpacity={0.12}>
+  ```
\ No newline at end of file
diff --git a/src/Wrap.js b/src/Wrap.js
index e472a990..5bc49875 100644
--- a/src/Wrap.js
+++ b/src/Wrap.js
@@ -33,7 +33,7 @@ const Wrap = (props: WrapProps): React.Element<*> => {
         <clipPath id={idClip}>{props.children}</clipPath>
 
         <linearGradient id={idGradient}>
-          <stop offset="0%" stopColor={props.primaryColor}>
+          <stop offset="0%" stopColor={props.primaryColor} stopOpacity={props.primaryOpacity}>
             {props.animate ? (
               <animate
                 attributeName="offset"
@@ -43,7 +43,7 @@ const Wrap = (props: WrapProps): React.Element<*> => {
               />
             ) : null}
           </stop>
-          <stop offset="50%" stopColor={props.secondaryColor}>
+          <stop offset="50%" stopColor={props.secondaryColor} stopOpacity={props.secondaryOpacity}>
             {props.animate ? (
               <animate
                 attributeName="offset"
@@ -53,7 +53,7 @@ const Wrap = (props: WrapProps): React.Element<*> => {
               />
             ) : null}
           </stop>
-          <stop offset="100%" stopColor={props.primaryColor}>
+          <stop offset="100%" stopColor={props.primaryColor} stopOpacity={props.primaryOpacity}>
             {props.animate ? (
               <animate
                 attributeName="offset"
diff --git a/src/index.js b/src/index.js
index 11687d09..930890ca 100755
--- a/src/index.js
+++ b/src/index.js
@@ -18,6 +18,8 @@ export type Props = {
   preserveAspectRatio: string,
   primaryColor: string,
   secondaryColor: string,
+  primaryOpacity?: number,
+  secondaryOpacity?: number,
   style: { [key: string]: any },
   uniquekey: string,
 }
@@ -30,6 +32,8 @@ export const defaultProps = {
   preserveAspectRatio: 'xMidYMid meet',
   primaryColor: '#f0f0f0',
   secondaryColor: '#e0e0e0',
+  primaryOpacity: 1,
+  secondaryOpacity: 1,
 }
 
 const InitialComponent = props => (

From 6335b9918cd18ef967837c9ed3c51a8c91f2cf46 Mon Sep 17 00:00:00 2001
From: Sam Walsh <web@samwalsh.co.nz>
Date: Thu, 10 May 2018 11:18:45 +1200
Subject: [PATCH 2/3] Remove primaryOpacity/secondaryOpacity conditional props
 type

---
 src/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/index.js b/src/index.js
index 930890ca..74518de9 100755
--- a/src/index.js
+++ b/src/index.js
@@ -18,8 +18,8 @@ export type Props = {
   preserveAspectRatio: string,
   primaryColor: string,
   secondaryColor: string,
-  primaryOpacity?: number,
-  secondaryOpacity?: number,
+  primaryOpacity: number,
+  secondaryOpacity: number,
   style: { [key: string]: any },
   uniquekey: string,
 }

From 977a2c9d4aede7fc6728c50ba38db37c7c73053a Mon Sep 17 00:00:00 2001
From: Sam Walsh <web@samwalsh.co.nz>
Date: Thu, 10 May 2018 12:46:15 +1200
Subject: [PATCH 3/3] Add tests for primaryOpacity and secondaryOpacity

---
 tests/index.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/tests/index.js b/tests/index.js
index ae5a51e7..b97f7f34 100755
--- a/tests/index.js
+++ b/tests/index.js
@@ -38,6 +38,8 @@ describe('<ContentLoader />:', () => {
         animate={false}
         primaryColor="#000"
         secondaryColor="#fff"
+        primaryOpacity={0.06}
+        secondaryOpacity={0.12}
         preserveAspectRatio="xMaxYMax"
         className="random-className"
         style={{ marginBottom: '10px' }}
@@ -68,6 +70,14 @@ describe('<ContentLoader />:', () => {
       expect(wrapper.props().secondaryColor).to.string('#fff')
     })
 
+    it('`primaryOpacity` is a number and used', () => {
+      expect(wrapper.props().primaryOpacity).to.equal(0.06)
+    })
+
+    it('`secondaryOpacity` is a number and used', () => {
+      expect(wrapper.props().secondaryOpacity).to.equal(0.12)
+    })
+
     it('`preserveAspectRatio` is a string and used', () => {
       expect(wrapper.props().preserveAspectRatio).to.string('xMaxYMax')
     })