実現したいこと
particles.js(https://marcbruederlin.github.io/particles.js/)を使用して、
幾何学模様が浮遊するアニメーションを制作しています。
オプションにて色を設定できるのですが、ここ数ヶ月以内からChrome(Edgeも)でのみ、
色の表現が変わってしまいました。Safari、firefoxでは正常に(意図した通り)表示されています。
※公式も同様の現象
- 原因を特定したい
- 他のブラウザ(Safari、firefox)と同様に表示できるようにしたい
前提
particles.js( https://marcbruederlin.github.io/particles.js/ )を使用しています。
Chromeでの見え方が突然変わってしまいました。
発生している問題・エラーメッセージ
エラーメッセージはありません
試したこと
jsのライブラリの401〜402に具体的にカラーコードを入れてみた
オプションの配列を単色にした
canvasを設置しているcontainerの背景を#000000にしてみたところ、指定した色のグラデーションで表示されているように見えた。背景が#000000以外の場合オブジェクトはほとんど黒に近い色で表示されているように見える
補足情報(FW/ツールのバージョンなど)
テストのcodepen
https://codepen.io/kaz333/pen/JjmQxgX
該当のソースコード
※ライブラリ部分は文字数の制限で記載できなかったので、上記codepenまたは下記公式よりご確認ください。
https://github.com/marcbruederlin/particles.js/blob/2cb1852c0a276cd694e0d03e810904dfd8bfac03/src/particles.js#L435
javascript
1window.onload = function() { 2 //perticle.js 3 Particles.init({ 4 selector: '.header__background', 5 color: ['#9F4367', '#9356A2', '#6B71AA', '#9FA6CF'], 6 maxParticles: 100, 7 connectParticles: true, 8 responsive: [ 9 { 10 breakpoint: 1024, 11 options: { 12 maxParticles: 80 13 } 14 }, { 15 breakpoint: 599, 16 options: { 17 maxParticles: 30 18 } 19 } 20 ] 21 }); 22 };
html
1<div class="perticle-wrap" style="background-color: #DFE0E1;"> 2 <canvas class="header__background"></canvas> 3</div>
どなたか、Chromeだけ表示のされ方が違う原因にお心当たりのある方、
また対応方法ご存じの方いらっしゃいましたらご教示いただけますよう宜しくお願いいたします。

回答1件
あなたの回答
tips
プレビュー