Not working in Safari.

Question

Not working in Safari.

Ekluv opened this issue 6 years ago · 28 comments

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

Answer 1 · 2018-04-29T15:36:07.000Z

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

Answer 2 · 2018-05-02T08:41:56.000Z

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

Answer 3 · 2018-05-02T11:56:03.000Z

@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

Answer 4 · 2018-05-02T12:00:45.000Z

@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

Answer 5 · 2018-05-02T12:30:17.000Z

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

Answer 6 · 2018-05-02T17:56:13.000Z

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

Target: Safari Version 11.0.3

Answer 7 · 2018-05-03T01:48:13.000Z

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?

Answer 8 · 2018-05-10T00:18:18.000Z

@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

Answer 9 · 2018-05-10T00:54:14.000Z

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

Answer 10 · 2018-05-10T01:12:34.000Z

I just published these changes on v3.1.2 👍

Answer 11 · 2018-11-26T15:22:05.000Z

I tried all your methods, Its not working

Answer 12 · 2018-11-27T21:54:46.000Z

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?

Answer 13 · 2018-11-28T15:34:16.000Z

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?

Answer 14 · 2018-11-30T18:13:29.000Z

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

Answer 15 · 2018-12-03T07:46:27.000Z

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

Answer 16 · 2019-02-01T14:18:42.000Z

🎉 This issue has been resolved in version 4.0.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

Answer 17 · 2019-03-06T02:59:38.000Z

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?

Answer 18 · 2019-03-07T14:15:48.000Z

🎉 This issue has been resolved in version 4.2.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

Answer 19 · 2019-03-07T14:19:03.000Z

@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

Answer 20 · 2019-03-19T15:37:53.000Z

<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! 🎉

Answer 21 · 2019-03-27T08:00:08.000Z

@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

Answer 22 · 2019-03-27T09:45:50.000Z

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

Thanks

Answer 23 · 2019-06-13T05:06:29.000Z

in my chrome not work, but safari perfectly

Answer 24 · 2019-06-13T08:58:01.000Z

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

Answer 25 · 2020-03-21T12:12:04.000Z

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

DECIDED baseUrl={window.location.pathname}

Answer 26 · 2020-04-16T11:37:35.000Z

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 < ?

Answer 27 · 2020-04-16T11:51:17.000Z

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

Answer 28 · 2022-07-15T02:10:04.000Z

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.