Framework7: アコーディオンが開いていると、iOS 11.3.1（iPhone 6）ではまだスクロールできません

別のクイックアップデートでは、accorion-item-contentで非表示のdivを使用しないなど、さまざまなことを試しました。また、ブロッククラスを使用してdivのaccorion-item-contentの内部を囲みました。

同じ問題があります。
私のレイアウトははるかに単純です。各アコーディオンアイテムのコンテンツとして通常のリストを含むアコーディオンリストです。

<script id="pageTemplate" type="text/template7">

            <div class="list accordion-list">
                <ul>
                    {{#each this}}
                    <li class="accordion-item">
                        <a href="#" class="item-link item-content accordion-item-toggle">
                            <div class="item-inner">
                                <div class="item-title">{{source}}</div>
                                <div class="item-after" style="color: #444444;">{{value}}</div>
                            </div>
                        </a>
                        <div class="accordion-item-content">
                            <div class="list">
                                <ul>
                                    {{#each variables}}
                                    <li>
                                        <div class="item-content">
                                            <div class="item-inner">
                                                <div class="item-title">{{this}}</div>
                                            </div>
                                        </div>
                                    </li>
                                    {{/each}}
                                </ul>
                            </div>
                        </div>
                    </li>
                    {{/each}}
                </ul>
            </div>

        </script>

このテンプレートによって生成されたコードをpage-content直接挿入します。

その動作には3つの問題があります。

1. アコーディオンアイテムを閉じるとちらつく
2. スクロールフリーズ
3. （最も嫌な）。 スクロールするとコンテンツが消える

注意
「view-in-popup」レイアウトを使用すると、コンテンツが消えます（F7ポップアップとF7ビューをコンテンツとして使用します。ます。ビューコンテンツは上記のコードによって生成されます）。
ルーター経由でページを開いた場合、そのような動作はありません。 少なくとも、私はそれを捕まえることができませんでした。
ちらつきとスクロールのフリーズは、両方のシナリオで発生します。

私はFramework7v2.0.8をCordova、iPhone 6PlusとiOS11.3.1で使用しています。

別のアップデート-私はiPhone7で同じことを試しましたが、問題なく動作します。 また、さまざまなAndroidデバイスで問題はありません。

@goodfellasthai CordovaアプリでUIWebViewまたはWKWebViewしていますか？

アプリにPhonegapとPhoneGapビルドを使用していますが、ビルドログを確認すると、UIWebViewのエントリが多く、WKWebViewのエントリがないため、UIWebViewでビルドされていると想定しています。

私の場合、アコーディオンを開くと、奇妙な理由でクラス「.page-content」に「overflow：hidden」が追加されました。
だから私はこれを私のアプリのcssファイルに追加しました：
.page-content{ overflow-y: scroll !important; }
スクロールできない問題が修正されました。

こんにちはStargurlは、私のアプリ.cssのオーバーフロー設定でまだ私にとって喜びがありません。これに別の問題を追加するだけで、関連している場合とそうでない場合があり、この問題フォーラムで同様の問題を抱えている人を見かけました。 アコーディオンアイテムのタイトルをクリックすると、アコーディオンがすばやく表示され、2回押したかのように消えます。 あなたがそれを超高速でクリックすると、それは機能します。 これらの問題の多くは関連しているように思われ、iPhone 6に固有の問題もありますが、いくつかのソースコードの改造を試しましたが、喜びはありません:(

みんな、

私がこれを解決するために数ヶ月間多くのフォーラムを探し回ったのと同じように、それはF7の問題ではなく、iOSが特にオーバーフロー状況をどのように処理するかについてのより具体的な問題のようです（私も見つけました私が解決策のいくつかを得たところであるイオンを使用して同様の問題を抱えている人々）。 また、このエラーは、タブを使用している場合にF7でのみ発生し、標準画面では発生しないように見えることもわかりました。

私が経験したすべての状況をカバーするために、以下のcss行を追加しました。特定のcss領域に「touch」cssを追加するまで、iOSは2本指スクロールでは機能しますが、1本指スクロールでは機能しません。

以下のcssをアプリのcssファイルに追加した後、iOSで画面をスクロールしたり非表示にしたりする問題はありませんでしたが、Androidのテスト中に同僚の何人かがアプリで同様の問題を報告しました。

他に詳細が見つかった場合は、このスレッドを更新します。

@ stargurl16は、私を正しい方向に

よろしく

ポール

CSS

.page-content {オーバーフロー：自動！重要; -webkit-overflow-scrolling：touch！important; }
.tab {オーバーフロー：自動; -webkit-overflow- scrolling ：touch; }
.tab .content-block { overflow：auto; -webkit-overflow-scrolling：touch;}
.tab .page-content { overflow：auto; -webkit-overflow-scrolling：touch;}
.accordion-item-content {-webkit-transform：none; 変換：なし; オーバーフロー：自動; -webkit-overflow-scrolling：touch;}

F7 v3.1.0に移行すると、結果は次のようになります。

1. 近いアコーディオンアイテムのちらつきはまだ存在します
2. スクロールのフリーズはまったくありません
3. コンテンツが消えることはありません

デバイスは同じです。iPhone6PlusとiOS11.3.1です。 コルドバベースのアプリ。

修正していただきありがとうございます。

こんにちは@contfedorovはい私はF7を3.1.0にアップグレードして、それが解決するかどうかを確認しましたが、cssの変更のみが解決しました。

私はまだあなたと同じようにちらつきを経験しています-それに関する情報を見つけたら、このスレッドをもう一度更新します。

こんにちは、みんな、

スクロールはソートされていますが、アコーディオンのコンテンツが消えるという問題があります。

@Devの皆さん、投稿ページの1つでサポートに登録した場合、これを優先事項と

よろしく

ポール

@goodfellasthaiこの問題を再現できる最小限のJSFiddleをセットアップしていただけますか？ そして来週の初めにどこかで見ていきます

@ nolimits4web-ご回答いただきありがとうございます。本日、Patreonページに定期的な寄付を設定します。Framework7を使用して優れた製品を開発したと思います。

JSFiddleの設定に関する問題は、WebブラウザーまたはAndroidでさえ問題を再現できないことです。問題は、アコーディオンコンテンツを含むiOSでのみ発生します。以前、ページをスクロールできなかったときにいくつかのビデオをアップロードしました。上記のcssを追加しましたが、これでスクロールの問題が修正されました。これを修正したのはcssのタッチ部分だったと思いますが、cssを追加すると、アコーディオンアイテムのコンテンツが画面に表示されなくなります。 私はその問題が起こっていることの別のビデオをやります。

私のアコーディオンアイテムのコンテンツは、同じアコーディオンアイテム内の他のdivセクションを表示/非表示にするボタンがあるという意味でかなり複雑なので、これがこの理由に何らかの影響を与える可能性があるかどうかはわかりません。 また、 @ contfedorovと同じ問題が

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

敬具

ポール

@goodfellasthaiありがとう！ ビデオの問題は、それを再現するのが難しいことです。 この問題はiOSSafariで再現されていますか？ それともCordovaアプリだけですか？ たぶん、GitHubで最小限の複製リポジトリを設定できます。 それがコルドバのみの問題である場合、それはいくつかの最小限のコルドバアプリである可能性があるので、それを修正できるようにライブでチェックする必要があります

@私は上記の利用WebKitのオーバーフロースクロールと同じCSS使用して、また、アコーディオンのちらつきの問題を解決しているようだ、この今使ってCSSを解決したと思っ@contfedorovの自動多分あなたはそれならば見に行く与えることができますそれはあなたのために働きます。

@ nolimits4webと画面消える問題を@contfedorovは解決しそうですが、アコーディオンのスクロールが今のユーザー名の下に次の数日で、プロジェクトへの定期的な支払い設定されます私の同僚のnolimits4webの1 cloudhaysを@ gmail.com。

よろしく

ポール

みんな、まだいくつかの最小限の複製レポが必要です。 あなたの何人かがそれを設定することができれば非常に役に立ちます

@contfedorov複製を行う

よろしく

ポール

@goodfellasthaiはい、やります。

@goodfellasthaiはあなたの解決策に感謝します、なぜならそれらの行を私のCSSに落とすだけで問題を解決することができたからです。

@ nolimits4web iOS Safariにアクセスできる場合は、 contfedorovが最初に

@mbplautz

エラーを再現する何かをWebに公開できます

それは良いことですが、iOS12で確認できるようになります

@ nolimits4web確認してください

https://mbplautz.github.io/app/index.html

iOS10のiPhoneで問題を再現することができました。

@ nolimits4web
遅刻してすみません。
残念ながら、現在、ちらつきやコンテンツの消失を再現することはできません。 F7v2.0.8経由でも。

スクロールのフリーズは再現可能ですが、v2.0.8の場合のみです（v3.1.0は正常に機能します）。 必要に応じてご覧ください。
https://github.com/contfedorov/f7-issues/tree/accordion_content_issue

なぜそれが私のために起こったのか理解したと思います。

それは、プルして更新することでした。すべてのアコーディオンコンテンツを動的に作成した後、app.ptr.done（）を発行します。これは、問題が発生したときです。タブを正常に起動するか、タブに再度アクセスすると、すべて正常に機能しましたが、プルして問題を更新します。

app.ptr.done（）を動的コンテンツ生成の開始に移動しました。これは、ptrプリローダーを取得しないことを意味しますが、コンテンツが生成されると、アコーディオンコンテンツは正常に機能します。

@mbplautzありがとう、今問題を見てください。 数日でそれの修正を見つけようとします

みなさん、こんにちは。プルして更新すると、まさにこの問題で閉じられた別のバグがあるようです。最新バージョンのF7がありますが、これはまだ発生しています。バグ＃1473、昨日テストするためにプルを削除して更新し、スクロールしました。タブ内で正常に動作し、プルを追加して更新し、iOSでコンテンツがスタック/消える問題が発生しました。この動作は、ブラウザーでは再現できません。

@ nolimits4webは、プロジェクトのスポンサーシップに関して、今日私のPMを追跡します。 彼らがまだそれをしていないのを見ることができます。

すべて、

それが役立つ場合は別の更新。 私の場合、それはptr-preloader divの存在であるように思われ、スクロールが動かなくなり、コンテンツが消えます。 （未満）

  <div class="ptr-preloader">
    <div class="preloader"></div>
    <div class="ptr-arrow"></div>
  </div>

このdivをコメントアウトすると、すべてが期待どおりに機能します。おそらく、ptr-preloaderdivのF7コード/ cssと関係がありますか？

よろしく

ポール

私にとって、framework7 2.x、iOS 12、iphone 5sの最後のバージョンでは、cssは機能しませんでした。
JavaScriptを使用してコンテンツ（ .page-content ）をheight: 100%続いてsetTimeoutでheight: auto 。 私の場合、それは要素のレンダリング間の同期の問題だったと思います。

バージョン3.6.2のスクロールのフリーズを修正するには、.page-contentに「before」を追加し、.page-content + 1pxの高さを指定します。 これにより、ページは常にスクロール可能になるため、サファリは常にオーバーフローを再計算します。

次のコードを参照してください。

.device-ios .page-content :: before {
表示ブロック;
コンテンツ： "";
位置：絶対;
z-index：-99999;
上：0px;
左：0px;
下：-1px;
右：0px;
}

最終的に、このcssを.always-scrollableクラス内にラップしたため、この動作を実装する必要があるページを常に制御できます。

@mjwvbそのcssを投稿してくれてありがとう。 それはまさに私が必要としていたものです。 私のアコーディオンにはv-forがあり、最初のレンダリングでは、iOSデバイスでオーバーフローを引き起こすほど十分に拡張されていません。 後でデータがロードされ、アコーディオンにスクロール動作が必要になると、iOSデバイスではスクロールが機能しなくなります。 （デバイスに常駐しないアプリ、iOSデバイスのChromeブラウザーからWebアプリをプルダウンするだけ）フィラーを入れただけでここに行き着きました

私のページで、最初のレンダリングでスクロールが必要になります。 フィラーを使用すると、アコーディオンは正常に動作します。 cssは、スクロールが不要な場合でも、最初のレンダリング時にこのスクロール条件を強制するように見えます。そのため、フィラーhtmlがなくても、データが読み込まれた後は期待どおりに機能します。 @ nolimits4webそれでも、IOSデバイスブラウザでアクセスできる最小限のリポジトリが必要な場合は、設定できます。

@mjwvbありがとうございます！ これにより、無限リスト表示ページに戻るときにスクロールがフリーズするという同様の問題が解決されました。

@mjwvb @ nolimits4webスクロールが常に正しくリセットされない理由を見つけたと思います。 .pageはID変換を使用します。 それを取り除くと、問題は解決したようです。 次のCSSをプロジェクトに追加しました。

.page {
  transform: none;
  -webkit-transform: none;
}

私の知る限り、トランジションでも問題なく動作するようです。

@holtwick素晴らしい発見、理由は

@ nolimits4webすばらしい！ これらの変換は通常、ハードウェアアクセラレーションによるペイントをトリガーし、スクロールの焦点がすぐに外れるためだと思います。 したがって、通常のペイントモードに戻すと、レンダリングとレイアウトが改善されます。 しかし、それは単なる推測です;）それを追加してくれてありがとう！

こんにちは、みんな

私はOpencart3でストアを運営しており、最近Webサイトのパフォーマンスを向上させるために拡張機能をインストールしました。 基本的に、ロードを高速化するためにWebページをキャッシュします。 これは、誰かが初めて特定のページにアクセスしたときにキャッシュを作成し、他の誰かがそのページに2回目、3回目などにアクセスしたときに、非常に高速に読み込まれるように機能します。 ページがAndroidデバイスによって初めてキャッシュされた場合、iphoneデバイスはページをスクロールできませんが、ページがiphoneによって初めてキャッシュされた場合、他のすべてのデバイスによって問題なくスクロールできます。