Ionic-framework: バグ：Androidでタブを切り替えると白いフラッシュが表示される

この問題の状況について何か一言？

同じ問題があります。 更新はありますか？

+1

この問題がある最小限の例を提供してください。

新しいイオンアプリ（タブテンプレート）を作成するだけで、背景を任意の色に変更してから白に変更します。 Androidデバイス（4.4、ネクサス5でテスト済み）でビルドして実行すると、タブを変更するたびに数ミリの白いフリックが表示されます。

これは、各ビューでイオンヘッダーバーが再定義されていることが原因であることがわかりました。 ion-header-barをメインのレイアウトテンプレートに移動しましたが、ちらつきが見られなくなりました。 デフォルトで生成されたプロジェクトでは、各ビューにヘッダーバーが配置されると思います。そのため、そこにもヘッダーバーが表示されます。

'ion-header-bar'sは自動的に生成されますが、どこで（そしてどのように）手動で使用しますか？

それで、 @ GentryRiggenは、ion-nav-barを意味しますか？

@mhartington私はion-side-menu-content内にion-tabsがあるion-side-menuを使用しています。

<ion-side-menus>
  <ion-side-menu side="left" class="left-side-menu">
    <ion-content drag-content="false" overflow-scroll="false" direction="y" delegate-handle="leftMenu">
      <div class="list">
        <a menu-close class="item item-icon-left" >Something</a>
        <a menu-close class="item item-icon-left" >Something</a>
        <a menu-close class="item item-icon-left" >Something</a>
      </div>
    </ion-content>
  </ion-side-menu>

  <ion-side-menu-content>
    <ion-header-bar align-title="center" class="bar-positive">
      <button class="button button-icon icon ion-navicon" menu-toggle="left"></button>
      <div class="titles">
            <h>TITLE</h1>
      </div>
    </ion-header-bar>

    <ion-tabs class="tabs-positive tabs-icon-only dark-background">
      <ion-tab>
        <ion-nav-view name="tab-1"></ion-nav-view>
      </ion-tab>

      <ion-tab>
        <ion-nav-view name="tab-2"></ion-nav-view>
      </ion-tab>

      <ion-tab>
        <ion-nav-view name="tab-3"></ion-nav-view>
      </ion-tab>
    </ion-tabs>
  </ion-side-menu-content>

</ion-side-menus>

そのためにion-header-barを使用するのではなく、ion-nav-barを使用してください。

@mhartington Imは、「ion-nav-bar」と画面のちらつき（タブ間を移動中）を使用しています...
では、どのように修正することを提案しますか？

android用に構築されたionicのシンプルなタブ「スターター」は、ナビゲートと、ion-nav-barを使用していると私が信じている間のフラッシュを示しています。

うーん、テストでは表示されません。

https://youtu.be/_ja8a08iSPE

ビデオで見ることができます..タブを変更すると白い画面が点滅します..ほんの数ミリ秒表示されます...背景色をより明確に赤、青、または暗い色に変更することを確認したい場合。

あなたは色あせたナビゲーションバーについて話しているのですか

彼は、タブを切り替えると一時的に表示される白い画面（イオンコンテンツの境界）について話しています。
初めて「ステータス」から「チャット」に切り替えると、ビデオではっきりと確認できます。 しかし、実際には毎回表示されます。

@mhartingtonアプリからビデオを添付しました（スローモーション）。そこに追加されていることがはっきりとわかります。
私は行動を起こし、皆さんがその問題を解決するのを手伝いたいのですが、少なくともあなたからの出発点が必要です。どこから始めればよいですか？

YouTubeリンク： https ：

ありがとう。

コードを確認しましたが、エラーはtabSelected関数（ionTabディレクティブ）にあります。
新しいタブを表示する前に、前のタブを非表示にしているようです。

私が作ったこの汚いハックはうまくいくようです。 しかし、私は適切な修正を見たいと思っています。
$ ionicViewSwitcher.viewEleIsActive（childElement、false）;の周りにタイムアウトを追加するだけです。

ionic.bundle.jsの55025行目

$timeout(function () {
 $ionicViewSwitcher.viewEleIsActive(childElement, false);
}, 100);

これは私に起こっています：

• Ionic、v1.0.1
• コルドバ5.3.3

Nexus4でAndroid5.1.1を実行しています。

それを再現するには、「タブ」スターターアプリを作成し、ナビゲーションバーの色を青に変更するだけで（たとえば、-stableを-positiveに変更することで）、ちらつきが明らかになります。 実際には白いナビゲーションバーでちらつきますが、白いちらつきに白は見えません。

Androidで移行時間を0ミリ秒に強制するスタイルを追加しようとしましたが、付属のChromeインスペクターを確認し、計算されたCSS値を調べることで、アプリがこれらのスタイルをヘッダーアイテムに適用していることを確認しました。 スタイルを削除し、0ミリ秒から他の数値（0.2ミリ秒または0.5ミリ秒-実際には点滅効果とほぼ同じ速さ）になったことを確認して、ダブルチェックしました。

@didbarbosaの修正を試みましたが、ブラウザのChromeと電話アプリの両方で$ timeoutが定義されていないと文句を言いました。 $ timeoutの値をログに記録したとき、それは実際には定義されていませんでした。

@ lloy0076ディレクティブに挿入する必要があります

IonicModule
.directive('ionTab', [
  '$compile',
  '$ionicConfig',
  '$ionicBind',
  '$ionicViewSwitcher',
  '$timeout',
function($compile, $ionicConfig, $ionicBind, $ionicViewSwitcher,$timeout) {

@ didbarbosa-実際、私のバージョンのIonicが最新リリースではないことに気づきました。 したがって、「bower.json」を次のように変更しました。

{{
"名前"： "HelloIonic"、
「プライベート」：「真」、
"devDependencies"：{
"ionic"： "driftyco / ionic-bower＃〜1"、
"platform.js"： "platform＃〜1.3.0"

...そして、$ timeoutソリューションがなくてもちらつきがないと思いますか...

たぶん、CSS移行ソリューションで同じことを試した場合、それ自体が「修正」される可能性があります。ただし、そのように魔法のように修正される問題は嫌いです。

はい、それは毎晩のリリースで消えたようです。
良いニュース:)

実際、私にとっては修正されていません。

私のために修正されていません2：\

この問題に関するニュースはありますか？

iOSでもこの問題が発生します。

iOSに関する@harryzunはhttps://github.com/driftyco/ionic/issues/4395を参照して

iOSでは同じ問題ではありません

v1.1にアップグレードした後、Androidでもこれに気づき始めました。 それがいつ始まったかはわかりませんが。

それはv1頃に始まりました

誰かが（一時的な）修正を持っているなら、私はそれを聞きたいです。

私は同じバグです...誰かもっと情報がありますか？ ：たこ：

おそらく関連はありませんが、以前に同様の問題が発生しました。奇妙な理由で、問題のある兄弟タブの状態の状態定義からcache: falseを削除すると、問題が解決しました。 この同じパターンを同じコントローラーとテンプレートの組み合わせで使用しているので、タブ設定の他の3つの場所で問題なく使用している理由がわかりません。

アップデート

だから私は、私たちが見た問題の根底にたどり着くために少し時間を費やしました。ちょっと面白くて、私の側の少しの素朴さが、stateChangeSuccessの前に黒のちらつきにつながりました。

したがって、前述のように、アプリケーション全体で同じパターンを使用しますが、重要な違いが1つあります。この状態では、バックエンドで現在発生していない欠点を回避するために、状態定義でAPIに裏打ちされた解決が実際に行われました。このパターンを使用する他のx3状態で説明する必要があります。

「チャット」状態は、タブのメイン状態の兄弟でした。 この状態に到達するには、メインビューでメンバーをクリックするだけで、兄弟チャット状態になります。 兄弟からナビゲートすると、黒いフラッシュは観察されず、解決が完了するまでメイン状態が表示され、その後、通常のナビゲーションが終了します。 チャットビューを履歴の現在の状態として（別のタブから）タブに戻ると、ui-router + ionicはすぐに新しいタブへのスワップを実行しますが、解決が完了するまで黒い画面が表示されます。

これは、 cache: falseを削除し、デフォルトでtrueに設定して問題を修正した理由についても意味があります。

あなたがそれについて考えるとき、私が推測するとき、完全に理にかなっています。 うまくいけば、これは誰かがグーグル経由でこれに遭遇した場合に頭痛を救うことができるかもしれません（私がしたのと同じ方法で）。

私はこれを次の行まで追跡しました：
https://github.com/driftyco/ionic/blob/af1bfef327e685585244c6051c4d38b98aa6c62a/js/angular/service/viewSwitcher.js#L194

          if (renderStart && renderEnd) {
            // CSS "auto" transitioned, not manually transitioned
            // wait a frame so the styles apply before auto transitioning
            //$timeout(onReflow, 16); <- original
            onReflow(); // removes flicker
          } else if (!renderEnd) {

新しいタブは16ミリ秒後まで表示されるように設定されていないため、タブを切り替えたときに1フレームがちらつく原因になります。

タブが関係しているときのその行のポイントはわかりませんが、 $timeout呼び出しをonReflow()単純なメソッド呼び出しに置き換えると、知覚されるパフォーマンスが大幅に向上し、ちらつきはもうありません。 ナビゲーションバーでもありません。

@mhartingtonこれに関して何か考えはありますか？ おそらく、少なくとも構成可能にする必要があります。

@adamdbradleyのhttps://github.com/driftyco/ionic/commit/8ebde73d0b8afac1bf1c1787c90a72a28a88bc3aによって導入されたようです

編集：より良い修正は、 if条件を次のように変更することです。

if (direction !== 'swap' && renderStart && renderEnd) {

Edit2：潜在的な副作用を取り除くさらに良い修正は、 $timeout呼び出しを次のように置き換えることです。
ionic.requestAnimationFrame(onReflow);
一緒にPRを送ります。

オープンPRhttps ：//github.com/driftyco/ionic/pull/4654

非常によくやりました！
私の問題を修正します。

どうもありがとう。

うまくいきませんでした... ionic-angular.jsファイルを更新しましたが、初期タイムアウト値を増やしても変更がありません。 私は何かが足りないのですか？
ナビゲーションバーのちらつきについては、この修正https://forum.ionicframework.com/t/flickering-when-navigating-via-tabs-on-android/27281を使用しましたが、コンテンツがちらつきます。

最終的には機能していますが、タブごとに最初に1回点滅します。理由は何ですか？

この問題に関するリリース計画はありますか？ 1.2または1.3？

最近の1.2リリースに含まれています。

+1、他に解決策はありますか？

うわー、これはまだ続いています。ええと..コアチームを理解することは、これが何であるかについての良い考えを持っていたでしょうか？

1.2はこれを修正しましたか？ この問題に対処するはずのコミットがそこにありました。

バグはまだ1.2から1.2.2にあります

私は再試行しました、そしてあなたが置くならばそれは解決されます：

ionic.requestAnimationFrame(onReflow);  

彼が言ったように、そしてそうではありません：

$timeout(function() {
              ionic.requestAnimationFrame(onReflow);
            });

明らかに、$ timeoutは何かをしています

@mlynch多分あなたはこれが何のためだったか覚えていますか？ https://github.com/driftyco/ionic/commit/d0246cf975bb4022eb890d3b0c28964e3065644c#diff -e25bdd32bda2f4f00f01c823ec86b1f3

再びそれを壊したようです。

多分これが理由です：

コードが$ timeoutを使用してキューに入れられている場合、DOMがAngularによって操作された後、およびブラウザーがレンダリングされた後に実行する必要があります（場合によってはちらつきが発生する可能性があります）

1.2.5のレビュー

残念ながら、これにより＃4782が壊れ、背面ビューが正しくアニメーション化されないことがありました。 $timeout削除することは、おそらくこれに対する解決策としては単純すぎます。

タイムアウトを削除しても問題は解決しません。

+1

この問題もあります...

+1

+1

bower.jsonを更新すると（正しい強調表示が）役立ちますが、前述のようにわずかな遅延があります。

{{
"名前"： "HelloIonic"、
「プライベート」：「真」、
"devDependencies"：{
"ionic"： "driftyco / ionic-bower＃1.7.12"、//ここで、更新されていることを確認してください
"aws-sdk-js"： "〜2.0.9"、
"ブートストラップ"： "〜3.2.0"、
"platform.js"： "platform＃〜1.3.1"
}
}

とにかく、わずかなフラッシュはアンドロイドだけにあり、それはほんの一瞬です。

1.2.3 "copenhagen"この問題を修正することを誰かが確認できますか？

@ mhartington @ mlynchバージョン1.2.3ではこれがまだ機能していないことを確認できます。 これらの一連のスクリーンショットを見てください。

私は最初に次のように[請求書]タブから始めます。

次に、[ルームメイト]タブをタップすると、次の手順が実行されます（点滅が発生します）。

1. アプリはタイトルに「請求書」と表示しますが、キャッシュされた「ルームメイト」タブを表示します
   
2. その後、アプリはすべてのコンテンツを削除しますが、「請求書」のタイトルは表示されます
   
3. アプリは「ルームメイト」のコンテンツを表示します
   
4. アプリが「ルームメイト」のタイトルでフェードイン
   

これらすべての手順を組み合わせると、タブを切り替えるときに恐ろしいちらつきが発生します。

バグの影響を確認するには、次のビデオをご覧ください。
https://dl.dropboxusercontent.com/u/97539058/Bugs/tabs-bug.mp4

ねえ、私のバグが私のアプリケーションでSQLiteを使用する際の問題であることに気づきました。 混乱させて申し訳ありません。

+1

+1

+1

タイムアウトの問題のようです

問題は私にとってちょうど消えました！ この問題は、タブの作成方法に関連していました。
タブ内のナビゲーションも適切な方法で構築するようにしてください。 コントローラの親に注意してください==>子

これ以上白いフラッシュはありません

@princefr詳しく説明してもらえますか？

iOSの場合、ionic.bundle.js行47715および47750でcss [ionic.CSS.TRANSITION_DURATION]をcss.WebkitTransitionに置き換える必要がありました。

`// iOSの移行
// -----------------------
provider.transitions.views.ios = function（enteringEle、leaveEle、direction、shouldAnimate）{

function setStyles(ele, opacity, x, boxShadowOpacity) {
  var css = {};
  css.WebkitTransition = d.shouldAnimate ? '' : 0;
  css.opacity = opacity;
  if (boxShadowOpacity > -1) {
    css.boxShadow = '0 0 10px rgba(0,0,0,' + (d.shouldAnimate ? boxShadowOpacity * 0.45 : 0.3) + ')';
  }
  css[ionic.CSS.TRANSFORM] = 'translate3d(' + x + '%,0,0)';
  ionic.DomUtil.cachedStyles(ele, css);
}

var d = {
  run: function(step) {
    if (direction == 'forward') {
      setStyles(enteringEle, 1, (1 - step) * 99, 1 - step); // starting at 98% prevents a flicker
      setStyles(leavingEle, (1 - 0.1 * step), step * -33, -1);

    } else if (direction == 'back') {
      setStyles(enteringEle, (1 - 0.1 * (1 - step)), (1 - step) * -33, -1);
      setStyles(leavingEle, 1, step * 100, 1 - step);

    } else {
      // swap, enter, exit
      setStyles(enteringEle, 1, 0, -1);
      setStyles(leavingEle, 0, 0, -1);
    }
  },
  shouldAnimate: shouldAnimate && (direction == 'forward' || direction == 'back')
};

return d;

};

provider.transitions.navBar.ios = function（enteringHeaderBar、LeavingHeaderBar、direction、shouldAnimate）{

function setStyles(ctrl, opacity, titleX, backTextX) {
  var css = {};
  css.WebkitTransition = d.shouldAnimate ? '' : '0ms';
  css.opacity = opacity === 1 ? '' : opacity;

  ctrl.setCss('buttons-left', css);
  ctrl.setCss('buttons-right', css);
  ctrl.setCss('back-button', css);

  css[ionic.CSS.TRANSFORM] = 'translate3d(' + backTextX + 'px,0,0)';
  ctrl.setCss('back-text', css);

  css[ionic.CSS.TRANSFORM] = 'translate3d(' + titleX + 'px,0,0)';
  ctrl.setCss('title', css);
}

function enter(ctrlA, ctrlB, step) {
  if (!ctrlA || !ctrlB) return;
  var titleX = (ctrlA.titleTextX() + ctrlA.titleWidth()) * (1 - step);
  var backTextX = (ctrlB && (ctrlB.titleTextX() - ctrlA.backButtonTextLeft()) * (1 - step)) || 0;
  setStyles(ctrlA, step, titleX, backTextX);
}

function leave(ctrlA, ctrlB, step) {
  if (!ctrlA || !ctrlB) return;
  var titleX = (-(ctrlA.titleTextX() - ctrlB.backButtonTextLeft()) - (ctrlA.titleLeftRight())) * step;
  setStyles(ctrlA, 1 - step, titleX, 0);
}

var d = {
  run: function(step) {
    var enteringHeaderCtrl = enteringHeaderBar.controller();
    var leavingHeaderCtrl = leavingHeaderBar && leavingHeaderBar.controller();
    if (d.direction == 'back') {
      leave(enteringHeaderCtrl, leavingHeaderCtrl, 1 - step);
      enter(leavingHeaderCtrl, enteringHeaderCtrl, 1 - step);
    } else {
      enter(enteringHeaderCtrl, leavingHeaderCtrl, step);
      leave(leavingHeaderCtrl, enteringHeaderCtrl, step);
    }
  },
  direction: direction,
  shouldAnimate: shouldAnimate && (direction == 'forward' || direction == 'back')
};

return d;

}; `

この行https://github.com/driftyco/ionic/blob/master/js/angular/service/viewSwitcher.js#L142を次のように変更すると、修正されたようです。

callback && ionic.requestAnimationFrame(callback);

しかし、これを修正する正しい方法かどうかはわかりません。

これはiOSの一部のリリースでも発生しますか（レポートはAndroidリリースに関するものであることを思い出してください）？

差出人：Abdul Wahab [mailto：[email protected]]
送信日：2016年2月10日水曜日午後9時59分
宛先：driftyco / ionic [email protected]
Cc：デビッド・ロイド[email protected]
件名：Re：[ionic]バグ：Androidでタブを切り替えると白いフラッシュが表示される（＃3907）

iOSの場合、ionic.bundle.js行47715および47750でcss [ionic.CSS.TRANSITION_DURATION]をcss.WebkitTransitionに置き換える必要がありました。

`// iOSの移行
// -----------------------
provider.transitions.views.ios = function（enteringEle、leaveEle、direction、shouldAnimate）{

関数setStyles（ele、opacity、x、boxShadowOpacity）{
var css = {};
css.WebkitTransition = d.shouldAnimate？ ''：0;
css.opacity =不透明度;
if（boxShadowOpacity> -1）{
css.boxShadow = '0 0 10px rgba（0,0,0、' +（d.shouldAnimate？boxShadowOpacity * 0.45：0.3）+ '）';
}
css [ionic.CSS.TRANSFORM] = 'translate3d（' + x + '％、0,0）';
ionic.DomUtil.cachedStyles（ele、css）;
}

var d = {
実行：function（step）{
if（direction == 'forward'）{
setStyles（enteringEle、1、（1-step）* 99、1-step）; // 98％から開始すると、ちらつきを防ぎます
setStyles（leavingEle、（1- 0.1 * step）、step * -33、-1）;

} else if (direction == 'back') {
  setStyles(enteringEle, (1 - 0.1 * (1 - step)), (1 - step) * -33, -1);
  setStyles(leavingEle, 1, step * 100, 1 - step);

} else {
  // swap, enter, exit
  setStyles(enteringEle, 1, 0, -1);
  setStyles(leavingEle, 0, 0, -1);
}

}、
shouldAnimate：shouldAnimate &&（方向== '進む' ||方向== '戻る'）
};

dを返す;

};

provider.transitions.navBar.ios = function（enteringHeaderBar、LeavingHeaderBar、direction、shouldAnimate）{

関数setStyles（ctrl、opacity、titleX、backTextX）{
var css = {};
css.WebkitTransition = d.shouldAnimate？ ''： '0ms';
css.opacity = opacity === 1？ ''：不透明度;

ctrl.setCss（ 'buttons-left'、css）;
ctrl.setCss（ 'buttons-right'、css）;
ctrl.setCss（ '戻るボタン'、css）;

css [ionic.CSS.TRANSFORM] = 'translate3d（' + backTextX + 'px、0,0）';
ctrl.setCss（ 'back-text'、css）;

css [ionic.CSS.TRANSFORM] = 'translate3d（' + titleX + 'px、0,0）';
ctrl.setCss（ 'title'、css）;
}

関数enter（ctrlA、ctrlB、step）{
if（！ctrlA ||！ctrlB）return;
var titleX =（ctrlA.titleTextX（）+ ctrlA.titleWidth（））*（1-ステップ）;
var backTextX =（ctrlB &&（ctrlB.titleTextX（）-ctrlA.backButtonTextLeft（））*（1-ステップ））|| 0;
setStyles（ctrlA、step、titleX、backTextX）;
}

関数leave（ctrlA、ctrlB、step）{
if（！ctrlA ||！ctrlB）return;
var titleX =（-（ctrlA.titleTextX（）-ctrlB.backButtonTextLeft（））-（ctrlA.titleLeftRight（）））*ステップ;
setStyles（ctrlA、1-step、titleX、0）;
}

var d = {
実行：function（step）{
var enterHeaderCtrl = enterHeaderBar.controller（）;
var LeaveingHeaderCtrl = LeaveingHeaderBar && LeaveingHeaderBar.controller（）;
if（d.direction == 'back'）{
Leave（enteringHeaderCtrl、leaveHeaderCtrl、1-ステップ）;
enter（leavingHeaderCtrl、enteringHeaderCtrl、1-ステップ）;
} そうしないと {
enter（enteringHeaderCtrl、LeavingHeaderCtrl、step）;
Leave（leavingHeaderCtrl、enteringHeaderCtrl、step）;
}
}、
方向：方向、
shouldAnimate：shouldAnimate &&（方向== '進む' ||方向== '戻る'）
};

dを返す;

}; `

—
このメールに直接返信するか、GitHubhttps ： //github.com/driftyco/ionic/issues/3907#issuecomment-182324500で表示してhttps://github.com/notifications/beacon/ABHsBD1Sp3tXsq8707UTfdVHgqSlxI0zks5pixaSgaJpZM4E82pl.gif

+1
アンドロイドで点滅します。

1+

+1

抽出とレンダリングがスムーズに行われる前にページがキャッシュされるように、「状態」で「キャッシュ：真」を実行します。

@ Harish-here初めてはどうですか？

ええ、キャッシュを使用するのは本当に良い考えではありません：これらの目的のためだけに当てはまります

@ Harish-ここ。 。 異なるページに同じ状態を使用するアプリがあります。 つまり、いくつかの$ stateパラメータをとる詳細ビューです。 同じビューでコンテンツが異なるため、cache：falseを使用できません:)
そして、それはこの特定の問題についても良い考えではないようです

ここでも同じ問題が1.2.4-nightly-1917を実行しています

+1

@ princefr-はい、タブがこの問題を軽減するための適切なマークアップが何であるかについて詳しく説明してください

@princefrタブの構造について詳しく

これは私にとってまだ問題であり、非常に苛立たしいものです。 動きや理解されている解決策はありますか？

+1

+1

この明日の人々を調べてください！ ：ニヤリ：

iOSに関連する問題があり、今夜ここにリンクします。 私はそれを再現することができました。

ありがとう@mhartington！

さらにコンテキストを追加するために、私の状況では、バグが次のように存在することがわかりました。

Index.html
<ion-nav-view></ion-nav-view>

ビュー-1.html
<ANY ELEMENT>Something</ANY ELEMENT><ion-nav-view></ion-nav-view>

サブビュー-1.html
<ANY></ANY>

しかし、view-1.htmlから<ANY ELEMENT>を削除したときは存在しません。

したがって、私の場合、親状態のコンテンツを完全に置き換えることなく、親状態の内部に子状態を表示するという望ましい効果を達成することはできません。

ui-view / ion-view / ion-nav-view / ion-tabs / ion-pane / etcのすべての方法を試しました。 まったく何も機能しませんでした。

この問題は同じバグを説明していますが、iOSでは

@mhartington会議アプリでテストできますか？ 私と@brandyはどちらも、タブを切り替えるときにわずかなフラッシュを再現することができました。 これはエミュレーターを使用しており、実際のデバイスではありませんでした。

＃5888のバグはionic2に関するものですが、コードベースが同じバグになるほど類似しているかどうかはわかりません。

やあ、これに我慢してくれてありがとう、本当に感謝します：smile：

それで、物事を見ると、これはionic 1.2.4でiOSとAndroidの両方に影響を与えるはずです、正しいですか？

また、タブスターターアプリでこれを再現できる人はいますか？

@mhartingtonそれはタブスターターアプリにあります、あなたはただ非常に注意する必要があります。 また、 https：//github.com/driftyco/ionic/pull/4654でこれを修正しましたが、どうやらそれは何か他のものを壊しました、そしてそれが修正されたとき、これは再び壊れました。

あなたが投稿したビデオでそれを見ることができます： https ： ください（1フレーム、それは非常に速い）。

@andreialecu申し分なく、それも見て、

https://youtu.be/R5EafRKTst0

同じクリップ、かなり遅くなりました

PRを見て、何ができるかを確認し、他のものを壊さないようにします：grin：

やあみんな！ ですから、私はこれについていくらか前進することができたと思います。 私は自分のテストで見栄えのするPRを開きましたが、最初にあなたからのフィードバックを聞きたいです。

viewFlickerブランチに変更が加えられました

https://github.com/driftyco/ionic/pull/5937

コードをプルダウンし、ソースからIonicをビルドし、アプリの変更をテストしてもかまわない場合は、これで問題が解決するかどうかを確認し、このバグを修正できます：shipit：

素晴らしい。 これはAndroid固有のキツネですか、それともiOSも見栄えが良くなりますか？

@ctcampbell androidATM 。 私のテストでは、iOSでちらつきを引き起こすことができませんでした

これはPRをデモする簡単なビデオです

https://youtu.be/nWSuocu64FU

+1

@jordantomaxこれは、PRがうまく機能することを意味しますか？ ：ニヤリ：

おっと、ごめんなさい。 フィードを購読するだけです。 私はそれをテストすることができます。 使用するために何かをコンパイルする必要がありますか？リリースはあなたのコミットによって影響を受けなかったようです。

ああ

これらの手順に従うことができます。

git clone https://github.com/driftyco/ionic.git
cd ionic 
git checkout viewFlicker
npm install
gulp build

そして、コンパイルされたコードはdist/js/ionic.bundle.jsはずです。
そのコードをコピーしてテストプロジェクトに貼り付け、試してみることができるはずです。

テストタブアプリケーションでうまく機能しているようです。 それでも、アプリのフラッシュに問題があります。 タブとメニューを使用していますが、タブは特定のページにしか表示されません。 私はあなたに見せるためにビデオを撮りたいのですが、どうすればそれを行うことができますか？

代わりに、クローンを作成してテストできる最小限のcodepenまたはgitリポジトリを作成できますか？
アプリの同様の設定

良いアイデア。 今夜か明日の朝にやろうと思います。 ご協力いただきありがとうございます。

@mhartingtonアプリでテストしたところ、ちらつきがなくなったようです。 ：+1：

AndroidNプレビューを実行しているNexus6、6.0.1を実行しているNexus 7 2013、5.1を実行しているMoto X 2014、4.4.4を実行しているNexus 7 2013でタブスターターを使用して修正をテストしましたが、点滅は見られませんでしたそれらのデバイスのいずれか。 素晴らしい ！

@jordantomaxその例をまとめる運はありますか？

@mhartington申し訳ありませんが、完全に圧倒されました！ 日曜日に取り組んでいきたいと思います。

@mhartington作成中のアプリでこれをテストしたところ、AndroidとiPhoneは＃5937で修正されているようです。

@jordantomax 、例をまとめる機会がありましたか？

ありがとう、
ダン

やあ、

この修正はうまく機能しますが、native-page-transitionsプラグインが正しく機能していないようです...この修正を加えた後、トランジションはおかしなことをしています。 リンクされていると思いますか？

@tgensolこのプラグインのデフォルトパラメータを使用してください。この修正でうまく機能します！

皆さんこんにちは！ 私のテストを通して、修正をテストしている皆さんが機能しているように見えるので、今はこの問題を解決します。 @jordantomaxは、そのテストを一緒に投げる機会があれば、遠慮なく投稿してください。喜んで再開します（：。また、上記の解決策で問題が解決しない場合は、 バグアワーに別の問題を開いて

イオンレポの重大な変更に伴い、これをどのようにコンパイルして構築するか

1.xブランチはIonic 1.3.1 。 リポジトリのクローンを作成してブランチをチェックアウトすると、 gulp buildを実行して配布可能なファイルを生成できるはずです。 これで問題が発生した場合はお知らせください。

ありがとう、
ダン

ありがとう。 すでに手動でdistをダウンロードしました：D

+1

これを修正しました。 これは、イオンビューの更新イオンバーの動作に関連して発生します。新しいバーが入力前に作成され、古いバー（現在）が非表示になり、点滅します。 解決策は、現在のバーの非表示をイベント開始後まで延期することです。 ご不明な点がございましたら、お気軽にお問い合わせください。

@smcreatorコードスニペットを共有できますか？

私はまだ同じ問題を抱えています....コードスニペットありがとう

この問題は最近のイオンバージョンで修正されていると思います。

私も同じ問題を抱えていて、 @ princefrからの応答が鍵でした。 ビューの上に複数のナビゲーションバーがありました。 tabs.htmlファイルの先頭にのみion-nav-barを追加しているときに、問題を修正しました。

<ion-nav-bar class="my-custom-bar">
  <ion-nav-back-button class="button-clear">
    <i  class="button button-icon ion-android-arrow-back" ng-click="vm.goBack()"></i>
  </ion-nav-back-button>
</ion-nav-bar>

<ion-tabs>
....
</ion-tabs>

問題をありがとう！ この問題は、元の問題に関連しないコメントを防ぐためにロックされています。 これが最新バージョンのIonicで引き続き問題になる場合は、新しい問題を作成し、テンプレートが完全に入力されていることを確認してください。