横から失礼致します！

僕も以前からずっと気にはなっていたのですが、なかなか口に出せずいました。

iPhone6sとios系しか確認出来ないので他の端末は自分では分かりません。

因みにプラグインは無しでも

Cocoonのサイトでも同様です。

サイドバーの表示もかなり遅い時もあるし

表示されても

スクロールが凄く重いです。

因みにSimplicity2では今でもスムーズにストレスなく動いています。

改善できるものなら僕からもよろしくお願いします。

ご報告ありがとうございます！
取り急ぎ怪しい部分を修正したものをアップしておきました。
https://github.com/yhira/cocoon/archive/master.zip
よろしかったら試してみていただけると助かります。

今後も、動作やデザイン的に少してもおかしな部分がありましたら、お気軽に書き込んでいただければ嬉しいです。
できるだけ、不具合のない良いものに出来ればと思うので。
「スマホのここ文字大きすぎない？」とかでもものすごくありがたいです。
僕の場合、スマホの動作確認が甘い傾向にあるので^^;

早速対応して頂きありがとうございます。

動作確認は、仕事から帰宅後の明日にでも行ってみます。

わいひらさん。いつもありがとう御座います。

試させて頂きました。

せっかくでしたが改善は感じられませんでした。(･ω･`)

早速対応して頂きありがとございました！

2つのサイトで試して見たのですが

やはりサイドバー（右側）がスクロール重いですね。

スクロールしても出来ず本文の方がスクロールされてしまうけど

少し時間を待てば

またサイドバーがスクロール可能になるけど

結果として以前と変わらなかったです。

iPhoneのメモリーを解放してみたけれど変化ナシでした。

たった今、家族のiPhone8で確認してみました。

スクロールした時の、モッサリとした動作は、iPhone6sの時と殆ど変わりありませんでした。

予想外でした。

参考までに追記させて頂きました

友達の

Androidバージョン4.1.2のXPERIA

で試して見たら全然問題なくスクロール可能ですね。

因みに他のCocoonを使用しているサイト様の場合も同じく

スムーズにスクロール可能でした。

ここ で hirosan さんがおしゃるように、

スクロールしても出来ず本文の方がスクロールされてしまうけど

サイドバーをスクロールしてる筈なのに、その背後で本文の方がサイドバーのギクシャクした動きとは裏腹にスムーズにスクロールされてしまう動作は不自然な感じがします。毎回起きています。

上記の現象は、サイドバーの方が前面の筈なのに、スクロール時に意図に反して背面の本文がアクティブになっているように思います。

Androidバージョン4.1.2のXPERIAで試して見たら全然問題なくスクロール可能ですね。

iPhone特有のものなのでしょうかね。
僕は（所持してないので）動作確認することはできないんですが、とりあえず背面がスクロールされないように処理を加えてみようと思います。

iPhone特有のものなのでしょうかね。

そうかも知れません。

Simplicityを見てみても、暗色部分をスクロールさせようとすると、スクロールするんですよね。でもSimplicityは大丈夫…。

何が問題なんだろう…。今のところまだ、原因はわかってないです。

 おっしゃる通り、 https://wp-simplicity.com では全く問題無く動作します。

上の画像は、 AMPでアクセスしたつもりの時のスクリーンショットです。

AMPでアクセスした場合は、スクロールは問題なく動作しました。

実験的に試してみました。

もしも、何かヒントになればと思いまして。

iphone6を使用しています。

こちらではSimplicityのAMPはモバイルメニューが表示されず

通常ページでは表示されて、ナビメニュー、サイドメニュー共に問題なしです。

cocoonに関してですが、他の人もおっしゃってる通り、

ナビメニュー、サイドメニューがひっかかるような状態です。

滑らかにメニューがスクロールせずに急ブレーキがかかるような感じですね。

TanTaaさん情報ありがとうございます。

iPhone6s でも、SimplicityのAMPはモバイルメニューが表示されませんでした。

あと気になったのは、iPhone特有の問題と言うのはもしかすると、機種そのものの問題というより、ブラウザ（Safariと Chrome）の違いが関係しているのでは・・・という憶測になりますが。

ちなみに、 https://wp-cocoon.com/downloads/#toc6 の推奨環境に書かれているように、

Cocoonの推奨環境はこちら。

WordPress4.7以上
PHP7以上（5.6でも動作するとは思います）
Google Chrome
Firefox
Microsoft Edge
Internet Explorer 11以上

ここには、Safari が含まれていないのですが、関係（影響）があるのだろうか・・・？

もしも時間があれば、空いている iPhone に、ChromeとFirefoxを入れて試してみたいのですが・・・

お世話になっております。

昨日iphine7で試して見るとサイドーのスクロールは重いのは重いけど

かなりマシでした。

コードに関してはまったくわからないので何のお役にも立てなくて申し訳ございません。

僕個人的に思うのはサイドバーの読み込みが遅いので

読み込みの途中だと本文の方がスクロールされるのではないのかなと思います。

それと参考までに

サイトの高速化の

JavaScript縮小化にチェックを入れると

外観⇒カスタマイズ⇒ウィゼェット

が展開されません。

チェックを外すと展開されます。

これも初期の頃からずっと今の0.4.8まで同じ現象です。

サーバーはMixhostです

プラグインは何も入れていない状態です。

あくまでも参考までにという事で処理してください。

あまり無理しないようにしてください！

もしも時間があれば、空いている iPhone に、ChromeとFirefoxを入れて試してみたいのですが・・・

これ見落としていたので後で試して見たいと思います。

まとめてみました。

• モバイル端末は、iPhone6s ブラウザはSafari、 iOSバージョンは11.2.6
  サイドバーのスクロール動作がすごく重たい
• Android 端末（比較的新しい）
  Google Chrome 右側のサイドバーはスムーズにスクロール
  左側はiPhone6s同様に重い
• iPhone6sとios系
  サイドバー（右側）がスクロール重いですね。
• Androidバージョン4.1.2のXPERIA
  全然問題なくスクロール可能
• iphone6・iPhone6s
  SimplicityのAMPはモバイルメニューが表示されず
• iphone6
  通常ページでは表示、ナビメニュー、サイドメニュー共に問題なし
• iphine7で試して見るとサイドーのスクロールは重いのは重いけどかなりマシ
  個人的に思うのはサイドバーの読み込みが遅い・読み込みの途中だと本文の方がスクロールされるのではないのかな。
  サイトの高速化の『JavaScript縮小化』にチェックを入れると『外観⇒カスタマイズ⇒ウィジェット』が展開されず、チェックを外すと展開されます。サーバー：Mixhost。プラグインなし

～～～　ここから追記　～～～

• iPhone5s

Chrome：スマホビュー：Cocoonトップページで確認

サイドバー：スクロールするが、画面から手が離れるとスクロールストップ（流れるように一気にスクロールはしないが、スクロール可能）
メニュー：短いので気にならない。

FireFox・Safari

スライドインのサイドバー・メニューChromeと同じ

• Android

Chrome
サイドバー：なめらかスムーズ：一気に下までスクロール可能

FireFox
サイドバー：何かのアプリ？が入ってるのかサイドバーの表示速度が遅い（4～５秒）・読み込むとスクロールはスルスル可能

ドルフィン
サイドバーどころかトップページの読み込みが遅い。スライドインの表示はそれから。サイドバークリック可能時にクリック。スルスル一気に下までスクロール可能

Opera
サイドバークリック可能時にクリック。その後一気にスクロール可能。

だいたいこんな感じでした。

下記の CSS を指定すると、 iOS でスムーズにスクロールできるとかはないでしょうか？

.navi-menu-content {
 -webkit-overflow-scrolling: touch;
}

私は iOS を持っていないので、動作は確認していません。

追記してiosのChrome・FireFox・Safariで試すと完ぺきでした。

iosで確認したのは私のページ： https://bibabosi-rizumu.com/

サイドバーのみですが、スルスル動きます＾＾

.navi-menu-content,
.sidebar-menu-content {
 -webkit-overflow-scrolling: touch;
}

ナビだけでなく、サイドバーも追加してチェックしました。

ついでにAMPページにも追記したら、iosで同じくスルスルとスクロール可能です。※はじめは重たかったような気がします？？？Androidで確認した記憶があるような…。

https://bibabosi-rizumu.com/xserver-ssh-teraterm/?amp=1

AndroidのAMPでも確認したら、Chrome・FireFoxでスルスル動くのを確認しました。Operaでもスルスル動いてるようです。元々スルスルだったのかは不明です。

※画像は以前と同様、ほぼ表示されませんが＾＾；

同じく報告します

iphone6環境ios11.3

Chrome・FireFox・Safari全てでサイドバーのみ、スルスル確認しました！

メニューの方は依然裏の判定が邪魔してるのか、だめです。

@kautakkuさんのサイドバー追加バージョンを試しました。

.navi-menu-content,
.sidebar-menu-content {
 -webkit-overflow-scrolling: touch;
}

かうたっくさん、ありがとうございます。

ついでに、もう 1 つお願いが。

下記の 2 つの CSS を試すと、 iOS でナビ側のスクロールはスムーズになるでしょうか？

1つ目の CSS

.navi-menu-content,
.sidebar-menu-content {
 -webkit-overflow-scrolling: touch;
}

.menu-content {
 overflow-y: scroll;
}

2 つ目の CSS

.navi-menu-content,
.sidebar-menu-content {
 -webkit-overflow-scrolling: touch;
}

.menu-content {
 overflow: scroll;
}

TanTaa さんのコメントが見えていなかった…。TanTaa さん、検証ありがとうございます。

もう 1 つ、 3 つ目の CSS も追加。

.navi-menu-content,
.sidebar-menu-content {
 -webkit-overflow-scrolling: touch;
}

.menu-content {
 overflow: hidden;
 overflow-y: auto;
}

 iOS のスクロールはすごく面倒。

AMPでアクセスした場合は、スクロールは問題なく動作しました。

これは確かに何かしらのヒントになるかも。
AMPページとの違いでまず思いつくのは、JavaScriptの使用なので、そこらへんが何かあるのかも。

こちらではSimplicityのAMPはモバイルメニューが表示されず

Simplicityでモバイルメニューは、JavaScriptで動作しているのでAMPページには表示されません。
そういう仕様です。
Cocoonで、AMPページでも使えるようになった感じです。

サイトの高速化の

JavaScript縮小化にチェックを入れると

外観⇒カスタマイズ⇒ウィゼェット

が展開されません。

チェックを外すと展開されます。

対策したものをアップしてみました。

https://github.com/yhira/cocoon/archive/master.zip

もしこれでも動作しない場合は、モバイルでニュー・サイドバーと話が混同してしまうので、新しくトピックを立てていただければ幸いです。

そうするとシンプルになるので。

Akiraさんありがとうございます！
確かに、Simplicityにも-webkit-overflow-scrolling: touch;が入っているようです。
完全に忘れていました。

とりあえず、-webkit-overflow-scrollingを記載したものをアップしておきました。
https://github.com/yhira/cocoon/archive/master.zip

あとは、Akiraさんが、書かれた3パターンの中から、最適な動作のものを使おうと思います。
https://wp-cocoon.com/community/demands/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e3%81%a7%e3%82%b5%e3%82%a4%e3%83%89%e3%83%90%e3%83%bc%e3%81%ae%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%81%ae%e5%8b%95%e4%bd%9c%e3%81%8c%e9%87%8d%e3%81%84/#post-1854
https://wp-cocoon.com/community/demands/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e3%81%a7%e3%82%b5%e3%82%a4%e3%83%89%e3%83%90%e3%83%bc%e3%81%ae%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%81%ae%e5%8b%95%e4%bd%9c%e3%81%8c%e9%87%8d%e3%81%84/#post-1856

僕は、iPhoneを持っていないので、お持ちの方がおられましたら、試してみていただけたら幸いです。

iPhoneて、-webkit-overflow-scrollingを指定しないと、スムーズにスクロール（慣性スクロール）しないんですね^^;

overflow: scroll; を指定している要素や iframe といった要素を iPhone や iPad といった iOS 系端末のブラウザで開くと, スクロールがぎこちなく感じします.

引用：CSS tips - -webkit-overflow-scrolling を指定して iOS でもスムーズにスクロールさせよう | phiary

AMPでアクセスした場合は、スクロールは問題なく動作しました。

iphone6の環境だとcocoonサイトのAMPページでも同様にタッチしてる時以外はスクロールせず

背面のスクロールが邪魔をしている感じになっています。

次に、僕の環境で申し訳ないですが、

@akiraさんのコードを自サイトに追加してみました。

.navi-menu-content,
.sidebar-menu-content {
 -webkit-overflow-scrolling: touch;
}

.menu-content {
 overflow: hidden;
 overflow-y: auto;
}

結果は、サイドバーはAMP通常共にスルスルになりました。

ナビメニューは依然変わらずです。

試したブラウザは、safari・chrome・firefoxの三種類です。

AkiraさんのCSSを試したいけど、メニューが少ないのでスクロールできません。

1，2，3パターン、どなたか1つ担当してCSSを追加してAMPリンクを置いてくださぁい。あとiPhoneユーザーさんご確認のご協力お願いします。

私も気付けばチェックしますね＾＾

すでに書き込みがあった＾＾；

@kautakkuさんの

メニューが少ないのでスクロールできません。

これ僕もなんですよ・・・。

なので、検証はメニューの多い人に任せます。

一応僕の確認はメニューの裏の暗くなっているページ部分がつられて動くかどうかで見てました。

上手くいってるサイドバーの方は、裏が全くスクロールしなかったので

でも、やっぱりメニュー少ないとちゃんとテストできないので、力になれなくてすいません（泣）

iphone6なら担当できます（笑）

皆さん有難う御座います。

取り急ぎテスト環境を作りました。（雑でスミマセン）

1つ目の CSS　 https://01.123web.info/

２つ目の CSS　 https://02.123web.info/

３つ目の CSS　 https://03.123web.info/

----------------------------------------------
サイト名：テスト０１
サイトURL： https://01.123web.info
ホームURL： https://01.123web.info

^^^^^^^^ 以下テスト０１～０３は同じ ^^^^^^^^

Wordpressバージョン：4.9.5
PHPバージョン：7.0.18
ブラウザ：Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:59.0) Gecko/20100101 Firefox/59.0
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：en-US,en;q=0.5
----------------------------------------------
テーマ名：Cocoon
バージョン：0.4.8
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：0.0.2
----------------------------------------------
利用中のプラグイン：
All-in-One WP Migration 6.67
----------------------------------------------

試しましたが、殆どか全くと言っていいほど違いを確認出来ませんでした。　どれも申し分ないと思います。　（iPhone6s ブラウザはSafari、 iOSバージョンは11.2.6です）

尚、上記のレンタルサーバーは、Xサーバーです。

僕もAkiraさんの

.navi-menu-content,
.sidebar-menu-content {
-webkit-overflow-scrolling: touch;
}

.menu-content {
overflow-y: scroll;
}

でサイドバーがスムーズにサクッと動いています！

CSS1～３まで使って見ても全部スムーズに動いています。

ただメニューの方は項目が少なくわかりません。

ありがとございました。

Cocoon 設定で以下の項目それぞれチェックマーク付けました。

AMP機能を有効化する

ブラウザキャッシュの有効化

HTMLを縮小化する

CSSを縮小化する

JavaScriptを縮小化する

僕はまだ、iPhone6s （Safari、 iOS：11.2.6）でしか確認出来ていません（上記のテスト環境１～３で）。どなたか他の端末（OS等で）で確認出来る方がいましたらお願い出きればと思います。

@keybouさんの

取り急ぎテスト環境を作りました。（雑でスミマセン）

1つ目の CSS　  https://01.123web.info/

２つ目の CSS　  https://02.123web.info/

３つ目の CSS　  https://03.123web.info/

をiphone6(ios11.3)でそれぞれsafari・chrome・firefoxで通常とampを試しました。

結果は全てにおいて、1つ目、2つ目、3つ目全てにおいて、サイドバー、ナビメニューともにスルスル化してました。

メニューが少ないとメニューの最上段からさらに上へ引っ張る、もしくは最下段からさらに下に引っ張ると、裏のページがスクロール判定されるみたいですね。

メニューが多い場合は、特段問題なく利用できると思います。

モバイルメニュー出してる時は完全に裏のスクロール判定なしでもいい気がしましたが、難しいのですかね。

とりあえず、こちらの環境では全てで正常に動作確認できましたので、ご報告までに！

みなさん、動作確認にご協力いただいてありがとうございます！

結果は全てにおいて、1つ目、2つ目、3つ目全てにおいて、サイドバー、ナビメニューともにスルスル化してました。

どれも問題ないようなので、とりあえず記述を一番短くできる2番目を採用しました（AMPは50KB制限があるので少しでも短い方が良いので）。
https://github.com/yhira/cocoon/archive/master.zip

モバイルメニュー出してる時は完全に裏のスクロール判定なしでもいい気がしましたが、難しいのですかね。

マウス操作を無効にしてしたりもしたのですが、うまくいきませんでした。手ごわい感じです。
ただ、モバイルメニューの数が少ない（高さ分ない）時は、わざわざスクロールする人もいないと思うので、とりあえずそのままにしておこうと思います。

最近は、わいひらさんのwp- cocoon サイトに 出先からiPhoneで訪問する機会が増え、毎日の日課になってます。色々と勉強にもなり、安定版の完成も待ち望んでいます。

そんな中今回、慣性スクロールが機能するようになりとても良かったです。ありがとうございました。

動作確認ありがとうございます。
ほぼほぼ、うまくいったようでよかったです。
Akiraさんに感謝です！
僕は完全に、overflow-scrollingのことは忘れていて、当分原因も思いつきもしなかったと思うので^^;

わいひらさんお疲れ様です

同じく慣性スクロール順調です。

マウス操作を無効にしてしたりもしたのですが、うまくいきませんでした。手ごわい感じです。
ただ、モバイルメニューの数が少ない（高さ分ない）時は、わざわざスクロールする人もいないと思うので、とりあえずそのままにしておこうと思います。

手ごわいのですね。

確かにメニュー少ないとスクロールいらないですもんね。

了解しました。いつもお疲れ様です。

Version: 0.4.7.2にして、サイドバーを確認したらスルスル動きます。（子テーマのCSS追記分は削除しました。）ちなみにAMPページに2番目を貼り付けてもダメダメでした。

スライドインの左側メニューは、一応ってな感じで後でチェックしてみようと思います。

AMPページに2番目を貼り付けてもダメダメでした。

style.cssに貼り付けてました＾＾；

amp.cssに貼り付けるとスルスル動きましたよ。

.navi-menu-content,
.sidebar-menu-content {
 -webkit-overflow-scrolling: touch;
}

.menu-content {
 overflow: scroll;
}

わいひらさん、amp.cssの追記もお願いしたいところです。

メニューをCSSで非表示にしてメニューにカテゴリなどたくさん詰め込んで確認してみたら、また連絡しますね。

まだ追記してないものをダウンロードしたのかもです。凄く混乱してますが…

子テーマstyle.cssとamp.cssに以下styleを追記したら、AMPページ・通常ページのiosからのアクセス：メニュー・サイドバーはスルスル動きます。

一時的メニューを増やした状態は以下画像；PCでスクショとりました。

.navi-menu-content,
.sidebar-menu-content {
 -webkit-overflow-scrolling: touch;
}

.menu-content {
 overflow: scroll;
}

追記したものを消すと以前の状態のまま：スクロール時手を放すとストップする：動きが遅い感じでした。

※iosでのみAMP：通常ページのメニュー・サイドバーの2つ確認。

私の環境だけかと思って何度も試した結果です。Chrome・FireFox・Safariで。

ちなみにSafariのAMPではない通常ページだけ表示直後すぐサイドバーをクリックすると、背面にあるページが下までスクロールされました。

※再度やり直すと正常にサイドバーが正常にスルスル下までスクロール。※※おそらく読み込まれるより早くサイドバーをクリックしたからだと思われます？

ブラウザキャッシュの有効化

これにチェックを入れてたからかも？です。ですが子テーマの記載はすぐに反映されました。とだけ追記しておきますね。

Version: 0.4.7.2

最新版の4.9で試していただきたいです。
もしくはこちら。
https://github.com/yhira/cocoon/archive/master.zip
最新版は追記する必要はないと思います。

わいひらさん、amp.cssの追記もお願いしたいところです。

SCSSを用いてAMP CSSを自動出力しているので、通常ページに記述されてるということは、AMPページにも自動的に出力されていると思います。
もしかしたら、何かの手違いで、違ったバージョンになっているのかも。

github.com/yhira/cocoon/archive/master.zip　をダウンロードして書き込みしました。

cocoon-master\style.css(3916,3) [UTF-8]: -webkit-overflow-scrolling: touch;
cocoon-master\plugins\lity\dist\lity.css(185,3) [SJIS]: -webkit-overflow-scrolling: touch;
cocoon-master\scss\mobile-menu-buttons.scss(109,3) [UTF-8]: -webkit-overflow-scrolling: touch;

この記載があったので、最新バージョンだと思ったのですが。

今は夜に4.9をダウンロードしてます。

もしくはこちら。
https://github.com/yhira/cocoon/archive/master.zip
最新版は追記する必要はないと思います。

コチラがどのページのリンクを踏んでも最新版ってことですよね？