[Di-na]

連投失礼いたします。
表示改善の方法をお伺いさせていただきます。

—————————————————————-

【お使いの Snow Monkey のバージョン】15.6.2
【お使いの Snow Monkey Blocks のバージョン】12.3.1
【お使いの Snow Monkey Editor のバージョン】 6.0.0
【お使いのブラウザ】Chrome , Safari
【当該サイトのURL】https://joyopa.com/opa-event/

### 実現したいこと

[Safari]ブラウザ上において、外部js読み込み時に固まらずに読み込めるようにしたい

### 発生している問題

幾何学模様が背景で動くparticles.jsを導入すると、上記同様Safariでのみカクカクと固まりながら動く（エラー表示なし）
（関係があると思われるコードを記載いたします）

子テーマのfunction.phpに記載したコード

<?php
add_action( 'wp_enqueue_scripts', function() {
	wp_enqueue_script(
		'particles.js',
			'https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.3/particles.js',
		[ 'jquery' ],
		false,
		true
	);
	wp_enqueue_script(
		get_stylesheet(),
		get_theme_file_uri( '/app.js' ),
		[ get_template() ],
		false,
		true
	);
} );

同階層に設置したapp.jsのコード

jQuery(function($){
  var particles = Particles.init({
    selector: '.background',
    sizeVariations: 10,
    color: ['#fde408', '#2F9D9B', '#3B983D'],
    connectParticles: true
  });
});

固定ページの最下層に記載したカスタムhtml

<canvas class="background"></canvas>

### 試したこと

• jsの読み込み方は、フォーラムの外部JSの読み込み方を参考に記載し直す。
• particles.jsを使用した場合Safariで重くなる現象があるか調べる（見当たらず）
• cdnではなくフォルダからjsファイルを読み込む仕様を試す（現象は変わらず）
• Chromeでは重くなることもなくエラーもなくjsが稼働し、Safari上でもエラーがないことから手詰まりになっており、SnowMonkeyテーマと相性の悪い何かがもしあるのであれば改善したい。

————————————

どうぞよろしくお願いいたします。

♥ 0

Who liked: No user

[キタジマ タカシ]

Mac Safari で動かないという issue は立っているみたいですね。

Does'nt work on Safari(Mac) · Issue #373 · VincentGarreau/particles.js

I am trying to animate logo, it is working fine on chrome. But for some reasons, it is not running on safari.

github.com

Snow Monkey 以外のテーマで試してみるとどうなりますか？

♥ 0

Who liked: No user

[Di-na]

MacのSafariにおいて動かないのですね。ありがとうございます。

TwentyTwentyのテーマで子テーマを作成して読み込みを試みるのですが、表示できずにおります。
サポート範疇が異なるかもしれず恐縮なのですが、function.phpへの書き込みは下記であっていますでしょうか。
子テーマのfunction.phpと同じ階層にapp.jsは配置しています。

function add_my_scripts() {
	// particles.js
	wp_enqueue_script(
		'particles.js',
		'https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.3/particles.js',
		array(),
		false,
		true
	);

	// app.js
	wp_enqueue_script(
		'app.js',
		get_theme_file_uri( '/app.js' ),
		array(),
		false,
		true
	);
}
add_action('wp_enqueue_scripts', 'add_my_scripts');

♥ 0

Who liked: No user

[Di-na]

こちらの方で、別テーマでの検証が難しそうなので、ここでトピックを閉じさせていただこうと思います。

ありがとうございました。

♥ 0

Who liked: No user

[投稿者]

投稿