Particles.js: can't see particles on chrome

[mrbubbaz]

Can't see any particles in your example page on chrome 55.0.2883.95 (64-bit) macos El Capitan.
Works perfectly on safari 9.1.3 and firefox

[BetaStacks]

Same here. It works in Safari but not in Chrome.

[viktorgino]

Check Chrome's console.
If it says something like this:

particles.min.js:9 XMLHttpRequest cannot load file:///*/particles.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

This should explain why its not working.

The solution:

From the error message we know that XMLHttpRequest doesn't allow CORS, so to work around it we either need to pass it a http URL, which should be easy if you running this on a webserver, however I assume that you are trying to run it locally, so we have to pass it a data URI. Just load it like this:

var partJson = {
    /*
     Your config JSON goes here.
     ...

     */
};
var jsonUri = "data:text/plain;base64,"+window.btoa(JSON.stringify(partJson));
particlesJS.load('particles', jsonUri, afterParticlesLoaded);

[BetaStacks]

I'm not getting any errors. https://demo.betastacks.com/backgrounds/particle-background/

[BetaStacks]

here is a page with the code inline and easier to read in the inspector https://demo.betastacks.com/backgrounds/particle-background/code/

[viktorgino]

What OS and Chrome version are you using? It works for me on Version 55.0.2883.87 m (64-bit) on Windows 10.

[BetaStacks]

That might be the difference.

Chrome Version 55.0.2883.95 (64-bit)
OS X El Capitan Version 10.11.6

[viktorgino]

@BetaStacks I'll give it a go when 55.0.2883.95 or higher is released for Windows, but it seems strange as it works fine with the current version for Windows and Linux

[viktorgino]

@BetaStacks try to enable incognito mode then visit the site to see if it works then

[BetaStacks]

I just have that a go. No change. I'll do some more testing with a different IDE today and report back.

On Jan 19, 2017, 3:37 PM -0600, Viktor Verebelyi [e-mail], wrote:
>

@BetaStacks (https://github.com/BetaStacks) try to enable incognito mode then visit the site to see if it works then

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub (https://github.com/VincentGarreau/particles.js/issues/175#issuecomment-273906419), or mute the thread (https://github.com/notifications/unsubscribe-auth/ATuYr89xefxHnRoeA2laxEjHJHdPUC1wks5rT9ecgaJpZM4LexEz).

[BetaStacks]

I actually don't think its my IDE because http://vincentgarreau.com/particles.js/ doesn't work for me either. However, the demos found via a search on codepen.io work.

[Julix91]

I haven't had trouble with it in my chrome, but I do know that using multiple files won't work if you're trying it offline, because of the cross origin rules unless you start your chrome with flags like

--allow-file-access-from-files --allow-file-access --allow-cross-origin-auth-prompt

Also if you want to test a higher version, try Canary. :)

Again, that it works on codepens probably means using an in-line version of the settings is a good idea, but seriously if the json file is stored on the same domain, chrome shouldn't be complaining about cross domain issues...

[BetaStacks]

@Julix91 , testing with Canary is a good idea. I will give that a go.
https://demo.betastacks.com/backgrounds/particle-background/code/ has all of the code inline.
I don't think anyone has seen and Cross Origin Errors.

[BetaStacks]

It is working with Version 57.0.2987.3 canary (64-bit)

[Julix91]

Your demo is also working with internet explorer, Mozilla Firefox, and my old Version 55.0.2883.87 m (64-bit) chrome... but then so was the original page by Vincent. Maybe re-install your Chrome?

Edit: Just saw from first post in this thread 55.0.2883.95 (64-bit) Hm? That's higher than my old/non-canary chrome browser, but mine says "you're up to date" - how strange.

[BetaStacks]

I will try removing and installing chrome. I just tested with my current install the http://vincentgarreau.com/particles.js/ and my demo. It works if I narrow the browser to around 500px and then disappears when I expand past 900px.

[Julix91]

Wow, that's neat! Very strange...

[VladRDV]

http://stackoverflow.com/questions/20041656/xmlhttprequest-cannot-load-file-cross-origin-requests-are-only-supported-for-ht

http://stackoverflow.com/questions/8449716/cross-origin-requests-are-only-supported-for-http-but-its-not-cross-domain

these pages partially explain the reason behind the error

as far as i can tell... chrome does not allow your script to GET files from your local machine( cuz safety )
that means you need to run local server to go around that limitation, the easiest to use local server I know is Denwer (PHP), but I use Node.js server...

by the way particles works perfectly in Firefox,(don't know about other desktop browsers or mobile browsers)