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 👍

[yogeshk1990]

I tried all your methods, Its not working

[danilowoz]

Hey @yogeshk1990
Do you have any other information so I can help you?

Which version of browser are you using? Are you using the latest version of the package? Can you the code in the codesandbox that reproduces the bug?

[pzmuda13]

Hi, I am developing angular app using port for angular of this lib. I have simmilar problem and I discovered that it only occurs in paths different than main page '/'

More description:
ngneat/content-loader#23

Maybe this scenario also applies to your lib?

[danilowoz]

Hey guys, I found an answer:

Problem:

HTML element is used to say "resolve all relative URLs relative not to this page, but to a new location". In your case, you've told it to resolve relative to the directory with the HTML page.
https://stackoverflow.com/questions/18259032/using-base-tag-on-a-page-that-contains-svg-marker-elements-fails-to-render-marke/18265336#18265336

Solution

Remove <base href="/"> from the document
airbnb/lottie-web#360

Actually, there is another way to solve it. But currently, there is no way to customize the url() in the SVG, even using the uniquekey prop. I'll document it and I'll try to figure out a better workaround.
airbnb/lottie-web#360 (comment)

Besides that, let me know if it works, thanks

Safari, welcome to new IE

[pzmuda13]

After removing base href angular libs works too, thanks @danilowoz :)

[danilowoz]

🎉 This issue has been resolved in version 4.0.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[majid-amiri]

Hi,
I am using version ^4.0.1 and I have this problem on Safari both on Mac and iOS. I know that removing <base /> is a solution to this issue but I need the <base /> tag in my app and I can't remove it. Do you have any other solutions for this issue?

[danilowoz]

🎉 This issue has been resolved in version 4.2.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[danilowoz]

@majid-amiri please update to latest version take a look at this solution:

baseUrl? string
Required if you're using <base url="/" /> in your <head/>. Defaults to an empty string. This prop is common used as: <ContentLoader baseUrl={window.location.pathname} /> which will fill the SVG attribute with the relative path.

Let me know if it works

[andelizondo]

<ContentLoader baseUrl={window.location.pathname} />

That fixed the issue for me, as I also needed the <base href="/"> tag in my app.
Thank you @danilowoz! 🎉

[phatNfqAsia]

@danilowoz
I upgraded to the 4.2.1 and did as instructed. I have one skeleton component applied to two different pages but only one of them worked, the other even did not render anything on Chrome.
Just so you know that the new update does not solve the issue completely, while removing the base href in head is more radical

[danilowoz]

Hey there, could you please send me a codesandbox?
Then I can debug what's happening

Thanks

[yohanessahrul]

in my chrome not work, but safari perfectly

[danilowoz]

Hey @yohanessahrul, can you send more details?
I would like to know how I could solve this issue, probably there are more people with this problem

Thanks

[jakhongir-i]

doesn’t work in safari, everything is fine in chrome

DECIDED baseUrl={window.location.pathname}

[vanoMekantsishvili]

I've decide to use Svg files, I draw in playground but on safari it shows black screen (But not always, though). Any suggestions? Or I need to actually install content-loader package and use < ?

[vanoMekantsishvili]

Turned out if you attach unique ids for 'clip-path' and 'fill' it works ^_^ at least on version Safari 12.1.2

[CatchGus]

I was also witnessing this black box issue on Safari even though we have no <base /> tag. For me the solution was to exclude ContentLoader being rendered server side.