Ionic-framework: Fehler: Weißer Blitz erscheint beim Wechsel zwischen Tabs auf Android

Irgendein Wort zum Status dieses Problems?

Habe das gleiche Problem. Irgendwelche Aktualisierungen?

+1

Bitte geben Sie ein Minimalbeispiel an, bei dem dieses Problem auftritt.

Erstellen Sie einfach eine neue ionische App (Tabs-Vorlage) und ändern Sie den Hintergrund in eine beliebige Farbe oder Weiß. Erstellen und Ausführen auf einem Android-Gerät (4.4, ich bin auf Nexus 5 getestet) und Sie werden feststellen, dass bei jedem Tab-Wechsel für einige Millisekunden ein weißer Streifen angezeigt wird.

Ich habe festgestellt, dass dies darauf zurückzuführen ist, dass die Ionenkopfleiste in jeder Ansicht neu definiert wird. Ich habe die ion-header-bar in meine Hauptlayoutvorlage verschoben und sehe das Flackern nicht mehr. Ich glaube, dass das standardmäßig generierte Projekt die Kopfzeile in jeder Ansicht platziert, weshalb Sie sie auch dort sehen.

die 'ion-header-bar's werden automatisch für mich generiert, wo (und wie) verwenden Sie sie manuell?

Also @GentryRiggen meinst du die

@mhartington Ich verwende ein Ionen-

<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>

Verwenden Sie dafür nicht die Ionen-Header-Leiste, sondern die Ionen-Nav-Leiste.

@mhartington Ich benutze die 'ion-nav-bar' und der Bildschirm flackert (beim
Also, wie schlagen Sie vor, es zu beheben?

die einfachen tabs "starter" von ionic für android zeigen den blitz zwischen navigieren und ich glaube, dass ion-nav-bar verwendet wird.

Hmm, das sehe ich bei meinen Tests nicht.

https://youtu.be/_ja8a08iSPE

Sie können es im Video sehen.. Es ist der weiße Bildschirm, der beim Wechseln der Registerkarten blinkt.. Er erscheint nur für wenige Millisekunden... Wenn Sie das deutlicher sehen möchten, ändern Sie die Hintergrundfarbe in Rot, Blau oder eine beliebige dunkle Farbe.

Redest du von der verblassenden Navigationsleiste?

Er spricht von dem weißen Bildschirm (Ion-Content-Perimeter), der beim Wechseln der Registerkarten kurz erscheint.
Sie können es in Ihrem Video deutlich sehen, wenn Sie das erste Mal von "Status" zu "Chats" wechseln. Aber es taucht tatsächlich jedes Mal auf.

@mhartington Ich habe ein Video von meiner App angehängt (Zeitlupe), das Sie dort deutlich sehen können.
Ich würde gerne etwas unternehmen und Ihnen helfen, dieses Problem zu lösen, aber ich brauche zumindest einen Ausgangspunkt von Ihnen. Wo soll ich anfangen?

Youtube-Link: https://youtu.be/TTuNPlL6Fmg

Vielen Dank.

Ich habe mir den Code angeschaut und für mich liegt der Fehler in der tabSelected-Funktion (ionTab-Direktive)
Es scheint die vorherige Registerkarte zu verbergen, bevor die neue angezeigt wird.

Dieser schmutzige Hack, den ich gemacht habe, scheint zu funktionieren. Aber ich würde gerne eine richtige Lösung sehen.
Fügen Sie einfach ein Timeout um $ionicViewSwitcher.viewEleIsActive(childElement, false);

Zeile 55025 von ionic.bundle.js

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

Das passiert mir mit:

• Ionisch, v1.0.1
• Cordova 5.3.3

Ich verwende Android 5.1.1 auf einem Nexus 4.

Um es zu reproduzieren, erstelle ich einfach eine "Tabs"-Starter-App, ändere die Farbe der Navbar auf Blau (zB indem ich -stable auf -positiv ändere) und das Flackern wird deutlich. Es flimmert tatsächlich mit der weißen Navigationsleiste, aber Sie können kein Weiß auf weißem Flackern sehen.

Ich habe versucht, Stile hinzuzufügen, um die Übergangszeit auf Android auf 0 ms zu erzwingen, und überprüft, ob die App diese Stile auf jedes Header-Element angewendet hat, indem ich mit einem angeschlossenen Chrome-Inspektor überprüft und die berechneten CSS-Werte überprüft habe. Ich habe es noch einmal überprüft, indem ich die Stile entfernt und überprüft habe, dass sie von 0 ms auf eine andere Zahl (0,2 ms oder 0,5 ms - und tatsächlich ungefähr so ​​​​schnell wie der Blinkeffekt) übergegangen sind.

Ich habe versucht, @didbarbosa zu reparieren, aber Chrome im Browser und die Telefon-App beschwerten sich, dass $timeout nicht definiert war. Als ich den Wert von $timeout protokollierte, war er tatsächlich nicht definiert.

@lloy0076 Sie müssen es in die Anweisung

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

@didbarbosa - Eigentlich habe ich gerade bemerkt, dass meine Version von Ionic nicht die neueste Version ist; Daher habe ich meine "bower.json" geändert, um zu lesen:

{
"name": "HelloIonic",
"privat": "wahr",
"devDependencies": {
"ionic": "driftyco/ionic-bower#~1",
"platform.js": "platform#~1.3.0"

...und würden Sie glauben, dass es auch ohne die $timeout-Lösung kein Flackern gibt...

Wenn Sie dasselbe mit der CSS-Übergangslösung versuchen, könnte sie sich vielleicht selbst "beheben" - obwohl ich Probleme hasse, die sich auf magische Weise von selbst beheben.

Ja, es scheint mit der nächtlichen Veröffentlichung verschwunden zu sein.
Gute Nachrichten :)

Bei mir ist es eigentlich nicht behoben.

bei mir nicht behoben 2:\

Gibt es Neuigkeiten zu diesem Thema?

Ich habe dieses Problem auch unter iOS.

@harryzun zu iOS siehe https://github.com/driftyco/ionic/issues/4395

Unter iOS ist es nicht das gleiche Problem

Ich habe dies auch auf Android irgendwann nach dem Upgrade auf v1.1 bemerkt. Bin mir aber nicht sicher wann es angefangen hat.

es begann um v1

Wenn jemand eine (vorübergehende) Lösung hat, würde ich mich freuen, sie zu hören.

Ich bin der gleiche Fehler... hat jemand mehr Infos?? :Tintenfisch:

Wahrscheinlich nicht verwandt, aber ich hatte früher ein ähnliches Problem, und aus irgendeinem bizarren Grund wurde das Problem behoben, indem ich cache: false aus meiner Zustandsdefinition für den anstößigen Geschwister-Tab-Zustand löschte. Ich habe keine Ahnung, warum, da wir dasselbe Muster mit derselben Controller + Vorlagen-Kombination an 3 anderen Stellen in unserem Tab-Setup ohne Probleme verwenden.

aktualisieren

Also habe ich nur ein bisschen Zeit damit verbracht, dem Problem, das wir gesehen haben, auf den Grund zu gehen, irgendwie interessant und ein bisschen Naivität meinerseits führte zu dem Flackern von Schwarz vor stateChangeSuccess.

Wie bereits erwähnt, verwenden wir in unserer gesamten Anwendung das gleiche Muster, jedoch mit einem wesentlichen Unterschied: Dieser Zustand hatte tatsächlich eine API-gestützte Auflösung in seiner Zustandsdefinition, um einen Mangel zu umgehen, den wir derzeit in unserem Backend haben, den wir nicht haben müssen mit den anderen x3-Zuständen berücksichtigt werden, die dieses Muster verwenden.

Der Status "Chat" war ein Geschwister des Hauptstatus für die Registerkarte. Um diesen Status zu erreichen, klicken Sie einfach auf ein Mitglied in der Hauptansicht und Sie landen im Status des Geschwister-Chats. Beim Navigieren von den Geschwistern aus wurde kein schwarzer Blitz beobachtet, der Hauptzustand war sichtbar, bis die Auflösung abgeschlossen war, und dann wurde die normale Navigation beendet. Beim Zurücknavigieren zum Tab (von einem anderen Tab) mit der Chatansicht als aktuellem Status im Verlauf würde ui-router + ionic den Wechsel zum neuen Tab sofort ausführen, aber der schwarze Bildschirm war sichtbar, bis die Auflösung abgeschlossen war .

Dies macht auch Sinn, warum das Entfernen von cache: false und die Standardeinstellung auf true das Problem behoben haben.

Macht absolut Sinn, wenn man darüber nachdenkt, denke ich. Hoffentlich kann dies jemandem Kopfschmerzen ersparen, wenn er über Google darüber stolpert (genauso wie ich).

Ich habe dies bis zu dieser Zeile verfolgt:
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) {

Dies ist die Ursache für das Ein-Frame-Flimmern beim Wechseln der Tabs, da der neue Tab erst 16 ms später auf sichtbar gesetzt wird.

Ich bin mir nicht sicher, was der Sinn dieser Zeile ist, wenn Tabs beteiligt sind, aber wenn Sie den $timeout Aufruf durch einen einfachen Methodenaufruf von onReflow() ersetzen, wird die wahrgenommene Leistung erheblich verbessert und es gibt kein Flimmern mehr. Auch nicht in der Navigationsleiste.

@mhartington irgendwelche Gedanken dazu? Vielleicht sollte es zumindest konfigurierbar gemacht werden.

Scheint von https://github.com/driftyco/ionic/commit/8ebde73d0b8afac1bf1c1787c90a72a28a88bc3a von @adamdbradley eingeführt zu werden

Bearbeiten: Eine bessere Lösung scheint es zu sein, einfach die Bedingung if zu ändern:

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

Edit2: Eine noch bessere Lösung, die mögliche Nebenwirkungen beseitigt, besteht darin, den $timeout Aufruf zu ersetzen durch:
ionic.requestAnimationFrame(onReflow);
Ich schicke eine PN dazu.

Geöffnete PR https://github.com/driftyco/ionic/pull/4654

Sehr gut gemacht!
Behebt das Problem bei mir.

Vielen Dank Kumpel.

Hat bei mir nicht funktioniert ... Ich habe meine Datei ionic-angular.js aktualisiert, aber ich sehe keine Änderung, selbst wenn ich den anfänglichen Timeout-Wert erhöhe. Verpasse ich etwas?
Für das Flackern der Navigationsleiste habe ich diesen Fix https://forum.ionicframework.com/t/flickering-when-navigating-via-tabs-on-android/27281 verwendet, aber jetzt flackert der Inhalt.

Endlich funktioniert es, aber es flackert immer noch einmal beim ersten Mal für jede Registerkarte, eine Idee warum?

Gibt es zu diesem Thema einen Release-Plan? 1,2 oder 1,3 ?

Es ist in der aktuellen Version 1.2 enthalten.

+1, gibt es noch andere lösungen?

Wow, das geht immer noch. eh.. War es eine gute Idee, dass das Kernteam eine gute Idee hat, was das war? Hat jemand einen guten Hinweis auf den Quellcode, mit dem wir experimentieren könnten?

Hat das 1.2 behoben? Da war ein Commit drin, der dieses Problem hätte lösen sollen.

Der Fehler ist immer noch da auf 1.2 bis 1.2.2

Ich habe es erneut versucht und es ist gelöst, wenn Sie Folgendes eingeben:

ionic.requestAnimationFrame(onReflow);  

wie gesagt, und nicht:

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

Offensichtlich macht $timeout etwas

@mlynch vielleicht erinnerst du dich wofür das war? https://github.com/driftyco/ionic/commit/d0246cf975bb4022eb890d3b0c28964e3065644c#diff -e25bdd32bda2f4f00f01c823ec86b1f3

Scheint wieder kaputt zu sein.

Vielleicht ist das der Grund:

Wenn Code mit $timeout in die Warteschlange gestellt wird, sollte er ausgeführt werden, nachdem das DOM von Angular manipuliert wurde und nachdem der Browser gerendert wurde (was in einigen Fällen zu Flimmern führen kann).

Überprüfung für 1.2.5

Leider hat dies #4782 gebrochen, was dazu führte, dass die Rückansicht manchmal nicht richtig animiert wurde. Das Entfernen von $timeout ist wahrscheinlich eine zu einfache Lösung dafür.

habe das Problem immer noch, auch wenn ich das Timeout entferne..

+1

Habe auch diese Probleme...

+1

+1

Beachten Sie, dass die Aktualisierung Ihrer bower.json hilft (korrekte Hervorhebung), aber es gibt wie erwähnt eine leichte Verzögerung

{
"name": "HelloIonic",
"privat": "wahr",
"devDependencies": {
"ionic": "driftyco/ionic-bower#1.7.12", //HIER, SICHERSTELLEN, DASS ES AKTUALISIERT IST
"aws-sdk-js": "~2.0.9",
"bootstrap": "~3.2.0",
"platform.js": "platform#~1.3.1"
}
}

Wie auch immer, der leichte Blitz ist nur auf Android und es ist nur ein Bruchteil einer Sekunde.

Kann jemand bestätigen, dass 1.2.3 "copenhagen" dieses Problem behebt?

@mhartington @mlynch Ich kann bestätigen, dass dies mit Version 1.2.3 immer noch nicht funktioniert. Sehen Sie sich diese Abfolge von Screenshots an.

Ich beginne zuerst auf meiner Registerkarte "Rechnungen" wie folgt:

Ich tippe dann auf meinen Mitbewohner-Tab und die folgenden Schritte passieren (was das Blinken verursacht):

1. App sagt "Rechnungen" für den Titel, zeigt aber den zwischengespeicherten "Mitbewohner"-Tab
   
2. Die App entfernt dann alle Inhalte, zeigt aber immer noch den Titel "Rechnungen" an
   
3. App zeigt "Mitbewohner"-Inhalte an
   
4. App blendet den Titel "Mitbewohner" ein
   

Wenn all diese Schritte kombiniert werden, erzeugt es beim Wechseln der Registerkarten ein scheußliches Flackern.

Sehen Sie sich dieses Video an, um den betroffenen Fehler zu sehen:
https://dl.dropboxusercontent.com/u/97539058/Bugs/tabs-bug.mp4

Hey, mir wurde klar, dass mein Fehler ein Problem mit der Verwendung von SQLite in meiner Anwendung war. Entschuldigung für die Verwirrung.

+1

+1

+1

Es scheint ein Problem mit der Zeitüberschreitung zu sein

bei mir ist das Problem einfach verschwunden! Das Problem hing damit zusammen, wie ich meine Tabs erstellt hatte!
Stellen Sie sicher, dass Sie es gut aufbauen, auch die Navigation in den Registerkarten. Pass auf Controller-Eltern auf ==> Kind

kein weißer Blitz mehr

@princefr könntest du bitte

Für iOS musste ich css[ionic.CSS.TRANSITION_DURATION] durch css.WebkitTransition in ionic.bundle.js Zeile 47715 und 47750 ersetzen

`// iOS-Übergänge
// ------------------------
provider.transitions.views.ios = function(enteringEle, leftingEle, 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, leftHeaderBar, 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;

};`

Scheint für mich behoben zu sein, als ich diese Zeile geändert habe https://github.com/driftyco/ionic/blob/master/js/angular/service/viewSwitcher.js#L142 :

callback && ionic.requestAnimationFrame(callback);

Ich bin mir jedoch nicht sicher, ob dies der richtige Weg ist, dies zu beheben.

Tritt dies auch bei einigen iOS-Versionen auf (denken Sie daran, dass sich der Bericht auf Android-Versionen bezieht)?

Von: Abdul Wahab [mailto:[email protected]]
Gesendet: Mittwoch, 10. Februar 2016 21:59
An: driftyco/ionic [email protected]
Cc: David Lloyd [email protected]
Betreff: Re: [ionic] bug: Weißer Blitz erscheint beim Wechseln zwischen Tabs auf Android (#3907)

Für iOS musste ich css[ionic.CSS.TRANSITION_DURATION] durch css.WebkitTransition in ionic.bundle.js Zeile 47715 und 47750 ersetzen

`// iOS-Übergänge
// ------------------------
provider.transitions.views.ios = function(enteringEle, leftingEle, Direction, shouldAnimate) {

Funktion setStyles(ele, opacity, x, boxShadowOpacity) {
var css = {};
css.WebkitTransition = d.shouldAnimate ? '': 0;
css.opacity = Opazität;
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 = {
ausführen: Funktion (Schritt) {
if (Richtung == 'vorwärts') {
setStyles(enteringEle, 1, (1 - Schritt) * 99, 1 - Schritt); // ab 98% verhindert ein Flackern
setStyles(leavingEle, (1 - 0,1 * Schritt), Schritt * -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 && (Richtung == 'Vorwärts' || Richtung == 'Zurück')
};

zurück d;

};

provider.transitions.navBar.ios = function(enteringHeaderBar, leftHeaderBar, Direction, shouldAnimate) {

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

ctrl.setCss('Tasten-links', css);
ctrl.setCss('Schaltflächen-rechts', css);
ctrl.setCss('Zurück-Schaltfläche', 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('Titel', css);
}

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

Funktion verlassen (StrgA, StrgB, Schritt) {
if (!ctrlA || !ctrlB) return;
var titleX = (-(ctrlA.titleTextX() - ctrlB.backButtonTextLeft()) - (ctrlA.titleLeftRight())) * Schritt;
setStyles(ctrlA, 1 - Schritt, titleX, 0);
}

var d = {
ausführen: Funktion (Schritt) {
var enterHeaderCtrl = enterHeaderBar.controller();
var departureHeaderCtrl = LeavingHeaderBar && LeavingHeaderBar.controller();
if (d.richtung == 'zurück') {
Leave(EnteringHeaderCtrl, LeaveHeaderCtrl, 1 - Schritt);
enter(LeavingHeaderCtrl, enterHeaderCtrl, 1 - Schritt);
} anders {
enter(headerCtrl eingeben,HeaderCtrl verlassen, Schritt);
Leave(LeavingHeaderCtrl, EnterHeaderCtrl, Schritt);
}
},
Richtung: Richtung,
shouldAnimate: shouldAnimate && (Richtung == 'Vorwärts' || Richtung == 'Zurück')
};

zurück d;

};`

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an https://github.com/driftyco/ionic/issues/3907#issuecomment -182324500 . https://github.com/notifications/beacon/ABHsBD1Sp3tXsq8707UTfdVHgqSlxI0zks5pixaSgaJpZM4E82pl.gif

+1
blinkt auf Android..

1+

+1

Jungs einfach " cache: true " in Ihrem " Zustand ", damit Ihre Seite vor dem Extrahieren und Rendern zwischengespeichert wurde

@Harish-hier Was ist mit dem ersten Mal?

Ja, es ist wirklich keine gute Idee, Cache zu verwenden: nur für diesen Zweck wahr

@Harish-hier. . Ich habe eine App, die denselben Status für verschiedene Seiten verwendet. Dh es handelt sich um eine Detailansicht, die einige $state-Parameter benötigt. Da es sich um dieselbe Ansicht mit unterschiedlichem Inhalt handelt, kann ich cache:false nicht verwenden :)
Und für dieses spezielle Problem scheint es auch keine gute Idee zu sein

Immer noch das gleiche Problem hier läuft 1.2.4-nightly-1917

+1

@princefr - ja, bitte erläutern Sie, was das richtige Markup für die Tabs wäre, um dieses Problem zu lindern

@princefr bitte, wenn Sie die Registerkartenstruktur

Das ist für mich immer noch ein Thema und ziemlich frustrierend. Gibt es eine Bewegung oder eine verständliche Auflösung?

+1

+1

Schauen Sie sich das morgen an, Leute! :Grinsen:

Es gibt ein verwandtes Problem mit iOS, das ich später heute Abend hier verlinken werde. Ich konnte es reproduzieren.

Danke @mhartington!

Um etwas mehr Kontext hinzuzufügen, habe ich in meiner Situation festgestellt, dass der Fehler mit Folgendem vorhanden ist:

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

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

Unteransicht-1.html
<ANY></ANY>

Aber NICHT vorhanden, wenn ich <ANY ELEMENT> aus view-1.html entfernt habe.

In meinem Fall kann ich also nicht den gewünschten Effekt erzielen, einen untergeordneten Zustand innerhalb eines übergeordneten Zustands anzuzeigen, ohne den Inhalt des übergeordneten Zustands vollständig zu ersetzen.

Ich habe ALLE Arten von ui-view/ion-view/ion-nav-view/ion-tabs/ion-pane/etc ausprobiert. Es hat absolut nichts funktioniert.

Dieses Problem beschreibt denselben Fehler, jedoch unter iOS https://github.com/driftyco/ionic/issues/5888

@mhartington kannst du mit der Konferenz-App testen? Ich und @brandy waren beide in der Lage, beim Umschalten durch die Registerkarten einen leichten Blitz zu

Der Fehler in #5888 betrifft ionic2, aber ich bin mir nicht sicher, ob die Codebasen ähnlich genug sind, damit es sich um denselben Fehler handelt.

Hey yall, danke für deine Geduld, weiß es wirklich zu schätzen :smile:

Wenn man sich also die Dinge ansieht, sollte dies mit ionic 1.2.4 sowohl iOS als auch Android betreffen, richtig?

Hat jemand dies auch mit der Tabs-Starter-App neu erstellen können?

@mhartington es ist in der Tabs-Starter-App vorhanden, Sie müssen nur sehr aufmerksam sein. Außerdem habe ich dies in https://github.com/driftyco/ionic/pull/4654 behoben, aber anscheinend hat das etwas anderes kaputt gemacht, und als das behoben wurde, war dies wieder kaputt.

Sie können es in dem von Ihnen geposteten Video sehen: https://www.youtube.com/watch?v=_ja8a08iSPE&feature=youtu.be Beachten Sie nur, dass anstelle des neuen Tabs ein sehr kurzer weißer Blitz (1 Frame, es ist) sehr schnell).

@andreialecu in Ordnung,

https://youtu.be/R5EafRKTst0

Gleicher Clip, nur stark verlangsamt

Schau dir die PR an, schau, was getan werden kann und verhindere, dass andere Dinge kaputt gehen :grin:

Hallo zusammen! Ich denke also, dass ich in der Lage war, einige Fortschritte zu machen. Ich habe eine PR geöffnet, die in meinen Tests gut aussieht, würde aber gerne zuerst ein Feedback von Ihnen hören.

Die Änderungen wurden am viewFlicker-Zweig vorgenommen

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

Wenn es Ihnen nichts ausmacht, den Code herunterzuladen, Ionic aus dem Quellcode zu erstellen und die Änderungen in Ihrer App zu testen, können wir sehen, ob dies die Dinge behebt und diesen Fehler beheben :shipit:

Fantastisch. Ist das ein Android-spezifischer Fuchs oder wird iOS auch besser aussehen?

@ctcampbell Android-Geldautomat. In meinen Tests konnte ich unter iOS kein Flackern verursachen

Hier ist ein kurzes Video zur Demonstration des PR

https://youtu.be/nWSuocu64FU

+1

@jordantomax bedeutet das, dass die PR für Sie gut funktioniert? :Grinsen:

Hoppla, nein Entschuldigung. Einfach den Feed abonnieren. Ausprobieren kann ich es trotzdem. Muss ich etwas kompilieren, um es verwenden zu können, ich sehe, dass die Veröffentlichung von Ihrem Commit nicht berührt wurde.

Ahh

Sie können diese Schritte ausführen.

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

Und Sie sollten den kompilierten Code in dist/js/ionic.bundle.js
Sie sollten in der Lage sein, diesen Code einfach in ein Testprojekt zu kopieren/einzufügen und ihn auszuprobieren.

Scheint in der Test-Tabs-Anwendung gut zu funktionieren. Ich habe immer noch Probleme mit dem Flashen in meiner App. Ich verwende Tabs und Menüs, aber Tabs werden nur auf bestimmten Seiten angezeigt. Ich möchte ein Video machen, um es Ihnen zu zeigen, wie mache ich das?

Wären Sie stattdessen in der Lage, ein minimales Codepen- oder Git-Repo zu erstellen, das ich klonen und testen könnte?
Nur eine ähnliche Einrichtung Ihrer App

Gute Idee. Das werde ich heute Abend oder morgen früh versuchen. Danke für Ihre Hilfe.

@mhartington Ich habe es gerade in meiner App getestet und das Flimmern scheint weg zu sein. :+1:

Ich habe den Fix mit dem Tabs-Starter auf einem Nexus 6 mit der Android N-Vorschau, einem Nexus 7 2013 mit 6.0.1, einem Moto X 2014 mit 5.1 und einem Nexus 7 2013 mit 4.4.4 getestet und kein Blinken gesehen eines dieser Geräte. Fantastisch !

@jordantomax hast du glück , dieses beispiel zusammenzubekommen?

@mhartington sorry, war total überfordert! Ich hoffe, dass ich am Sonntag daran arbeiten kann.

@mhartington Ich habe dies gerade in meiner App getestet, die ich

@jordantomax , hatten Sie die Gelegenheit, ein Beispiel zusammenzustellen?

Vielen Dank,
Dan

Hi,

Dieser Fix funktioniert gut, aber es sieht so aus, als ob das native-page-transitions-Plugin dann nicht richtig funktioniert ... Übergänge machen verrückte Dinge, nachdem ich diesen Fix installiert habe. Glaubst du es hängt zusammen?

@tgensol Verwenden Sie Standardparameter für diese Plugins, es funktioniert gut mit diesem Fix!

Hallo alle! Wie es durch meine Tests scheint und ihr das Testen des Fixes zu funktionieren scheint, werde ich dieses Problem vorerst schließen. @jordantomax wenn Sie eine Chance bekommen , dass Test zusammen zu werfen , fühlen Sie sich frei zu schreiben , und ich werde gerne wieder öffnen . (: Auch @tgensol wenn die obige Lösung nicht beheben Ihr Problem würden Sie ein anderes Thema auf dem Bug Stunde mit Öffnungs etwas ausmachen? Danke an alle!

Wie kompilieren und bauen wir dies mit den bahnbrechenden Änderungen im ionischen Repo?

1.x Zweig ist jetzt Ionic 1.3.1 . Wenn Sie das Repository klonen und den Zweig auschecken, sollten Sie gulp build ausführen können, um die verteilbaren Dateien zu generieren. Bitte lassen Sie mich wissen, wenn Sie Probleme damit haben.

Vielen Dank,
Dan

Vielen Dank. habe die Dist bereits manuell heruntergeladen :D

+1

Ich habe dies behoben. Dies geschieht im Zusammenhang mit dem Verhalten des Ionenbalkens in der Ionenansicht: Neuer Balken wird vor dem Betreten erstellt und blendet den alten Balken (aktuell) aus und blinkt. Die Lösung besteht darin, das Ausblenden des aktuellen Balkens auf das Ereignis nach der Eingabe zu verschieben. Bitte schreiben Sie mir, wenn Sie Fragen haben.

@smcreator könnten Sie die Code-Schnipsel teilen?

Ich habe immer noch das gleiche Problem .... irgendwelche Codeschnipsel Danke

Ich denke, dieses Problem ist in den neuesten ionischen Versionen behoben.

Ich hatte das gleiche Problem und die Antwort von @princefr war der Schlüssel. Ich hatte mehrere Navigationsleisten über den Ansichten. Während ich ion-nav-bar nur oben in meiner tabs.html Datei hinzugefügt habe, habe ich das Problem behoben:

<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>

Danke für das Problem! Dieses Problem wird gesperrt, um Kommentare zu verhindern, die für das ursprüngliche Problem nicht relevant sind. Wenn dies immer noch ein Problem mit der neuesten Version von Ionic ist, erstellen Sie bitte ein neues Problem und stellen Sie sicher, dass die Vorlage vollständig ausgefüllt ist.