Not working in Safari.

[Ekluv]

What did you do?

My Loader Component

const Loader = props => (
  <ContentLoader
    preserveAspectRatio="none"
    style={{width: '100%' }}
  >
    <rect x="0" y="0" rx="5" ry="5" width="100%" height={300} /> 
  </ContentLoader>
)

What did you expect to happen?

Expect to work for all browsers

What happened actually?

Working fine on Chrome and FireFox but giving black layout for safari.

Which versions of react-content-loader, and which browser are affected by this issue?

"react-content-loader": "^3.1.1"
"react": "^15.4.2"
Browsers: Safari

[danilowoz]

Hey @Ekluv, thanks for the report
I got some tests here and it works fine:

First, what is the version of Safari? And are there some styles in the parents?
Try to isolate the component and let me know if that works

Thanks

[karanmartian]

same. I get black screen content when viewed on mobile with all browsers. I am rendering the content loader inside a custom card component

[danilowoz]

@karanmartian @Ekluv let me know which browser version you are using, please
I have been testing on safari/iOS 10 and other browser and it works fine

[karanmartian]

@danilowoz iOS ver 11.3 Safari and also Chrome.
iPhone 8 model MQ7F2LL/A
It works fine on Desktop browsers as well as under responsive testing in Chrome on Desktop. But on mobile it shows black content

[danilowoz]

hey, I invited you to talk more about it here: https://gitter.im/react-content-loader/Lobby#

[Ekluv]

@danilowoz only style i have used is flex. check screenshot

Target: Safari Version 11.0.3

[samwalshnz]

I have sent a message in the Gitter chat:

Hi guys! I've also encountered this. It's around the use of rgba values. @Ekluv Were you using an rgba color? Unfortunately Safari doesn't support rgba for stop-colors. An alternative to this is discussed on this stackoverlow question: https://stackoverflow.com/questions/11303740/svg-linear-gradient-doesnt-work-in-safari
Basically, instead of say rgba(0,0,0,0.5), you would set the color to rgb(0,0,0) and set the the stop-opacity to stop-opacity="0.5". Currently though, this react-content-loader component doesn't support a primaryOpacity and secondaryOpacity value (like primaryColor and secondaryColor). @danilowoz Would you object to an introduction of primaryOpacity and secondaryOpacity? If not, then I wouldn't mind having a look in the code and submitted a PR if you like?

[danilowoz]

@Ekluv @karanmartian
Can you try to isolate the code in a sandbox? Because of I couldn't see the bug yet, so if you paste the code enough to see the bug I will try to investigate again.

So far I just can conclude that is Safari bug (as @samwalshnz already mentioned).
If you have more information, please reopen the PR

Thank so much for your contributions

[samwalshnz]

My PR proposes the use of primaryOpacity and secondaryOpacity so that it can work in Safari. Basically, instead of using rgba values for primary/secondaryColor, switch it to rgb and move the alpha value from the rgba color to the new primary/secondaryOpacity props. Described in more detail in the updated Readme.md and commit messages etc.

Basically primary/secondaryOpacity => stop-opacity on the linearGradient stop

[danilowoz]

I just published these changes on v3.1.2 👍