New primaryOpacity and secondaryOpacity props to work around Safari rgba bug

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}>
+  ```

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"

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 => (

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')
     })