サイト全体に「COLORS(ブルー)」スキン適用中。

スクロール追従が効かない | 不具合報告 | Cocoon フォーラム

書き込みの前に以下の3点をご確認ください。

  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示してください
  3. 該当部分のキャプチャ環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因がわからない不具合が出た場合のトラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 画面が真っ白になった際のエラーメッセージの確認方法 

フォーラムの内容は、CCライセンス(CC BY-ND 2.1)に準じていれば転載も自由です。

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク

スクロール追従が効かない  

  RSS

haineons
(@haineons)
Trusted Memberサイト
参加: 10か月 前
投稿: 45
2019年1月29日 19:41  

スマホ画面で横にしてみたあと、縦に戻してみるとサイドバーが消える

上記修正用に追加されたセレクタとサイドバースクロール追従部分が干渉するらしく

追従部分が効かなくなっているみたいです

メインの方は使っていないので分かりませんが、もしかしたらこちらも効かないかもしれません

親要素にoverflow: hiddenを指定している場合、position: stickyを使うことができません。

という事みたいなので現在は削除して使っています…アドセンス広告がちゃんとリサイズされてくれれば問題無いんですけどねぇ


わいひら 件のいいね!
返信引用
草村
(@kusamura_mono)
Trusted Memberサイト
参加: 3か月 前
投稿: 81
2019年1月29日 21:54  

広告の不具合が再現できなくてちゃんと試せていないのですが、広告を囲んでいる要素に指定する事で解決出来たらposition:sticky;が使えて便利なんですがどうなんでしょう。

.ad-area {
    overflow:hidden;
}

こういう感じとか…


Akira, ジャム君, わいひら と 1 人の方がいいね!
返信引用
Akira
(@akira)
Reputable Memberサイト
参加: 11か月 前
投稿: 291
2019年1月29日 21:56  

あー…。ごめんなさい。追従ウィジェットエリアを忘れてました。

こうかな。

html {
  overflow-x: hidden;
}

body {
  overflow: visible;
}

ジャム君, 草村, わいひら と 1 人の方がいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 3657
2019年1月29日 23:08  

ご報告ありがとうございます。
position: stickyにそんな仕様があるのはしませんでした。

とりあえず、草村さんの方法を試したら、僕の環境では画面の横→縦にしても正常動作しているようでした。
なのでダウンロードページのファイルを1.5.7.2にアップデートしておきました。


Akira, ジャム君, 草村 と 1 人の方がいいね!
返信引用
haineons
(@haineons)
Trusted Memberサイト
参加: 10か月 前
投稿: 45
2019年1月29日 23:34  

草村さん、Akiraさん、有難うございます

レスを見て自分でも確認していて少し遅くなりましたが、自分の所でも草村さんの方法で上手くいきました

Akiraさんの物だと追従は効くようになるんですが、自分の所ではバナーがカラムをオーバーするようになってしまいました

どちらかの影響だとは思うのですが、自分ではちょっと分かりませんでした

 

わいひらさん、修正&アップロード有難うございます


Akira, 草村わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 3657
2019年1月29日 23:53  

それでしたら、草村さんの方法でこのまま行こうと思います。
ご確認ありがとうございます。


返信引用
ジャム君
(@jamkun)
Trusted Memberサイト
参加: 9か月 前
投稿: 50
2019年1月31日 21:06  

どうやら修正があった影響なのか、Internet Explorer 11だとスクロール追従が無効になっているようです。

(IE 11より古いIEは、実際にテストできる環境がないため不明)

ChromeだとこのサイトでもMixHostの広告が追従してきますが、IEだと追従部分の内容表示はされているものの動きません。

IE利用のユーザーがどれだけ訪れるのか昨今では怪しい部分もありますが、もしかすると同様の現象が別のブラウザでも発生している可能性があるかもしれませんね。マイナーなブラウザだとは思いますが…

出先からの検証なもので以前のバージョンやら比較し詳細を調べるのは難しいのですが、IEはCSSを別途記述いただくか、AdSenseの関係上追従しないものとして、いったん推奨ブラウザから除外が必要かもしれないです。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 3657
2019年1月31日 21:23  

IE11は、以前は動作していましたでしょうか?
IE11はstickyが使えないので、基本的に動作はしません。
ただ、対応のJavaScriptで動作させていたと思うのですが、うまく動作していないのかも(lib/utils.phpのwp_enqueue_stickyfill関数部分)。
ただ、この際IE11は無視して良いのかなと思ったり。
でもまだまだ、日本の場合はそれなりにユーザーはいそうですね。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 3657
2019年1月31日 21:49  

今、僕の環境のIE11で試してみたのですが、問題なく動作しているようです。
何でだろう。
とりあえず、IEのバージョンは、添付画像です。


返信引用
ジャム君
(@jamkun)
Trusted Memberサイト
参加: 9か月 前
投稿: 50
2019年1月31日 22:12  

確認くださりありがとございます。なぜこちらのIEでは動かないのか…ネットカフェのPC(Windows 10)で正常に更新がなされていないのかもしれません。

バージョンは以下のものでした。

https://gyazo.com/0d3959fe9ccaa551bc701a69209c598a

以前自宅のIE 11(Windows 7)で確認していた時には動作していたかと思うのですが、現状どうなっているのか、帰宅しましたら報告いたします。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 3657
2019年1月31日 22:30  

あら、僕の環境のIE11が古いのかと思いきや、「更新バージョン」は僕のバージョンの方が高い…。
ここら辺わよくわからないですね…(僕の環境はWindows8.1)。

とりあえず、こちらのページを最下部までスクロールした限りでは、IEでも一番下までついてくるようです。
https://wp-cocoon.com/bugs-and-wants/


返信引用
ジャム君
(@jamkun)
Trusted Memberサイト
参加: 9か月 前
投稿: 50
2019年2月1日 00:17  

自宅(Windows 7)のIE 11のバージョンは以下のものでした。

https://gyazo.com/add583ed2b4c99692d0e389b779bfacb

提示いただいたページでは、スクロール追従がネットカフェのPCでも自宅のPCでも、IEでは機能しませんでした。まさに謎です…

ただ自サイトにて確認したところ、Cocoon 1.5.7.5でも正常に動作するパターンと動作しないパターンがあるようで、

  • WP Fastest Cache

のキャッシュが関係しているのかもしれません。

IEで新規にキャッシュを生成させた場合には追従しましたが、Chrome/Firefox/Cronでの自動生成など「IE以外でキャッシュが生成された」場合、追従なされないようです。

本当にプラグインが原因とすれば、サポート対象外のケースとなるとおりですので自己責任の範囲内なのですが、ほぼ同時刻に同ページでも検証し、わいひらさんの環境では動作し、当方環境では動作しない、というのは何が原因なのか、謎が深まるばかりです。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 3657
2019年2月1日 19:34  

当サイトも現在「WP Fastest Cache」を使っています。
でも今のところ問題はないようです。
プラグインのオプションの設定具合とかなんですかね。
でもそれだったら、症状が出たり出なかったりはおかしいですし…。謎ですね。

デベロッパーツールのコンソールに何かエラーは出ていますか?


返信引用
ジャム君
(@jamkun)
Trusted Memberサイト
参加: 9か月 前
投稿: 50
2019年2月1日 20:53  

そうですよね、ここでも「WP Fastest Cache」を同じく使っていらっしゃるため、問題があるときとないときが謎です。ちなみにですが、昨日ご提示いただいていたページで試したところ、IEでも正常動作を確認しました。

当方で問題確認している、あえてChromeを最初のアクセスにしてキャッシュを再生成させたページで確認したところ、やはりIEではスクロール追従せず、Chrome/IEそれぞれ添付画像のメッセージでした。

確認したページ

https://cocoon.oyashirosama.xyz/jamkun/cocoon/503

これと言って目立ったエラーはないように見受けられました。

当方環境でも高速化のチェック有無は無関係のようでしたので、まっさらな新規テスト環境(+WP Fastest Cacheあり環境)も作成し、もう少し原因を探ってみます。


返信引用
ジャム君
(@jamkun)
Trusted Memberサイト
参加: 9か月 前
投稿: 50
2019年2月1日 22:50  

まっさらな環境で検証してみました。スクロール追従に置いてみたのは、「[c] 新着記事」に「チェック・入力したページで表示>投稿とAMPにチェック」したもの。

https://gyazo.com/5f9b616e5e4145ab07f89aa5b6c22d22

(AMPが隠れていますがこの状態)

 

IEでも動作する(Cocoon 1.5.7.5 + 子テーマ 1.0.6のみ)

https://cocoontest1.oyashirosama.xyz/2019/02/01/%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E8%BF%BD%E5%BE%93%E3%83%86%E3%82%B9%E3%83%88/

IEだと動作しない(上記ページにWP Fastest Cache加えたもの)

https://cocoontest2.oyashirosama.xyz/2019/02/01/%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E8%BF%BD%E5%BE%93%E3%83%86%E3%82%B9%E3%83%88/

----------------------------------------------
サイト名:Cocoonテスト2
サイトURL: https://cocoontest2.oyashirosama.xyz
ホームURL: https://cocoontest2.oyashirosama.xyz
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
Wordpressバージョン:5.0.3
PHPバージョン:7.2.6
ブラウザ:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.81 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名:Cocoon
バージョン:1.5.7.5
カテゴリ数:1
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.0.6
----------------------------------------------
Gutenberg:1
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
WP Fastest Cache 0.8.9.0
----------------------------------------------

エックスサーバーを利用していますが、「Xアクセラレータ」「mod_pagespeed」「ブラウザキャッシュ」のサーバー側設定はオフにしてあります。

ドメインの階層が深くなる「サブドメインなのが原因」かとも思ったのですが、本番環境では独自ドメインそのまま利用して問題が発生しているため、「プラグインの問題」としてキャッシュ生成時に、やはり何か問題があるのかもしれませんね。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 3657
2019年2月1日 23:58  

確かに、上記テストページは、僕のIE11でも動作しないようです。
原因までは今のところ分からないですが。

オプションはどうしてます?
僕の環境では、添付画像のような感じです。


返信引用
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 11か月 前
投稿: 1854
2019年2月2日 00:22  

ジャム君さん

https://www.wpfastestcache.com/features/preload-settings/

あとプリロードの設定もどんなのかな?って思います。

※私のテスト環境用サブドメインはキチンと停止するので。

 

※ちなみに私のIE11ではCocoonも停止しません。さらに再読み込み後デバッガ―を見ると(スライドインのさいご)『初めての方はサイトの始め方参照。』のあとに</a>と変な終了タグが付いて、個人的に謎が謎を呼んでます。


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 3657
2019年2月2日 00:40  

</a>と変な終了タグが付いて、個人的に謎が謎を呼んでます。

ウィジェットのソースコードを見ても、該当するa終了タグは入っていないようなんだけど、何でだろう…。


返信引用
ジャム君
(@jamkun)
Trusted Memberサイト
参加: 9か月 前
投稿: 50
2019年2月2日 02:56  

お二方、ありがとうございます。テスト環境の「WP Fastest Cache」本体の設定と「Preload」の設定は、添付画像のとおりです。

本番環境では「Preload」のチェックに「タグ」や「カテゴリ」が含まれるなど、少し違いがある部分もありますが、「Reset After Completed」にはあえてチェックを入れず運用しております。

(多少負荷が上がるのは承知ですが、ランダムに広告を入れ替えつつキャッシュも維持したいため)


わいひら 件のいいね!
返信引用
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 11か月 前
投稿: 1854
2019年2月2日 09:14  

テスト環境サブドメインで、添付画像通りに設定してみました。

するとスクロール追従領域は華麗にスルー、追従しませんねぇ 🤗 

この通りで特に問題なかったです。※『ファイル』パーマリンクは503ではないですが。

 

ただ追従する時としないときがあるんですよね。

例えばCocoonトップページ。

  • 一昨日は追従OK
  • 昨日は追従NG
  • 今朝は追従OK!みたいな。

</a>と変な終了タグが付いて、個人的に謎が謎を呼んでます。

ウィジェットのソースコードを見ても、該当するa終了タグは入っていないようなんだけど、何でだろう…。

https://wp-cocoon.com/bugs-and-wants/

このページのIE、DOMでも表示されてないのに、デバッガ―では…ですね。

挙動が不安定過ぎてよく分かりません 🤔  🙄  😊 


わいひら 件のいいね!
返信引用
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 11か月 前
投稿: 1854
2019年2月2日 09:41  

テスト環境サブドメインで、添付画像通りに設定してみました。

するとスクロール追従領域は華麗にスルー、追従しませんねぇ 🤗 

スクロール追従領域に設定するのを忘れてました!※そりゃ華麗にスルーして当然 🤣 

 

って事で、サイドスクロール追従に入れると問題なく『追従OK!状態』でした。※エックスサーバー高速化のアクセラレータ・キャッシュはONのまま。

どっちにしても不安定な気もします。


わいひら 件のいいね!
返信引用
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 11か月 前
投稿: 1854
2019年2月2日 09:41  

テスト環境サブドメインで、添付画像通りに設定してみました。

するとスクロール追従領域は華麗にスルー、追従しませんねぇ 🤗 

スクロール追従領域に設定するのを忘れてました!※そりゃ華麗にスルーして当然 🤣 

 

って事で、サイドスクロール追従に入れると問題なく『追従OK!状態』でした。※エックスサーバー高速化のアクセラレータ・キャッシュはONのまま。

どっちにしても不安定な気もします。


返信引用
ジャム君
(@jamkun)
Trusted Memberサイト
参加: 9か月 前
投稿: 50
2019年2月2日 16:35  

検証くださりありがとうございます。

ただ追従する時としないときがあるんですよね。

例えばCocoonトップページ。

  • 一昨日は追従OK
  • 昨日は追従NG
  • 今朝は追従OK!みたいな。

確かに日によって状況が変わっていることもあります。先日私が検証したような、

あえてChromeを最初のアクセスにしてキャッシュを再生成させたページで確認したところ、やはりIEではスクロール追従せず、Chrome/IEそれぞれ添付画像のメッセージでした。

このような形式で、「WP Fastest Cache」のキャッシュがパージ→「初回アクセスのブラウザによって動作が変わる」ことも確認できはしたのですが、ほぼ同時間帯にわいひらさんと同じページを見て挙動が違ったことから、不安定感は否めません。

Cocoonテーマ側というより、「プラグイン」やサーバー機能の「キャッシュ類」の影響が大きそうな部分でもあるので、「サポート対象外」分野になりそうですかね。

IEでスクロール追従してくれない件に関しては、ほかのテーマでも情報を集めつつ、プラグイン作者さんに改善要望を出したほうがいいかもしれないですね。


返信引用
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 11か月 前
投稿: 1854
2019年2月2日 19:05  

サブドメインテスト環境でプラグインを導入したうえ、再度いまIEで試したんですが。やっぱり追従します。ただキャッシュが保存されてないようです。FTPソフトでcacheディレクトリ以下を確認した結果です。

とりあえず情報的にどうか不明ですが、一応。

複数テスト環境構築+テスト、お疲れ様でした❦


ジャム君わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 3657
2019年2月2日 20:40  

うーん、不具合がプラグイン特有のもので具合再現も不安定となると、ちょっとお手上げかもしれません。

サイドバー追従に関しては、最初からJavaScriptで動作させれば、そういったことも起こらないのかもしれません。
ただ、IEを省いてでも、position: stickyの追従動作が一番美しいんですよね…。画面もチラつかないし、AMPでも使えるし。
IEは、今後確実に減少傾向にはあると思うので、様子を見つつ、上手い対応方法があれば対応出来ればと思います。


ジャム君 件のいいね!
返信引用

返信する


  

許可された最大ファイルサイズ 2 MB

 
Share:
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
スポンサーリンク
わいひらをフォローする
おすすめサーバ
mixhost

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
〇アダルト・出会い系サイト可
△安定性にやや欠ける

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
△アダルト・出会い系サイト可(条件あり)
△開始したてなので運営能力は未知数(対応良)

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
○http/2(高速化プロトコル)に対応
〇アダルト・出会い系サイト可
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

Cocoon
  
動作中

ログイン または 登録 してください

タイトルとURLをコピーしました