Ionic-framework: bug : Flash blanc apparaissant lors du basculement entre les onglets sur Android

Un mot sur l'état de ce problème ?

Avoir le même problème. Les mises à jour?

+1

Veuillez fournir un exemple minimal qui présente ce problème.

Créez simplement une nouvelle application ionique (modèle d'onglets) changez l'arrière-plan en n'importe quelle couleur, puis en blanc. construisez et exécutez sur un appareil Android (4.4, je suis testé sur le Nexus 5) et vous remarquerez qu'il y a un coup blanc de quelques millièmes à chaque changement d'onglet.

J'ai découvert que cela était dû à la redéfinition de la barre d'en-tête ionique dans chaque vue. J'ai déplacé ion-header-bar vers mon modèle de mise en page principal et je ne vois plus le scintillement. Je pense que le projet généré par défaut place la barre d'en-tête dans chaque vue, c'est pourquoi vous la voyez également.

le 'ion-header-bar' est généré automatiquement pour moi, où (et comment) l'utilisez-vous manuellement ?

Alors @GentryRiggen, vous voulez dire la barre de navigation ionique ?

@mhartington J'utilise ion-side-menu avec un ion-tabs à l'intérieur du ion-side-menu-content.

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

N'utilisez pas la barre d'en-tête ionique pour cela, utilisez la barre de navigation ionique.

@mhartington J'utilise la 'ion-nav-bar' et le scintillement de l'écran (tout en se déplaçant entre les onglets)...
alors comment proposez-vous de le réparer?

les simples onglets "starter" de ionic construits pour Android montrent le flash entre la navigation et qui, je crois, utilise ion-nav-bar.

Hmm, je ne le vois pas dans mes tests.

https://youtu.be/_ja8a08iSPE

Vous pouvez le voir dans la vidéo .. C'est le flash d'écran blanc lorsque vous changez d'onglet.

Parlez-vous de la barre de navigation qui s'estompe

Il parle de l'écran blanc (périmètre à contenu ionique) qui apparaît brièvement lorsque vous changez d'onglet.
Vous pouvez le voir clairement dans votre vidéo lorsque vous passez pour la première fois de « Status » à « Chats ». Mais il apparaît en fait à chaque fois.

@mhartington J'ai joint une vidéo de mon application (ralenti), vous pouvez clairement la voir s'y ajouter.
J'aimerais prendre des mesures et vous aider à résoudre ce problème, mais j'ai besoin d'au moins un point de départ de votre part. Par où dois-je commencer ?

lien youtube : https://youtu.be/TTuNPlL6Fmg

Merci.

J'ai regardé le code et pour moi l'erreur est dans la fonction tabSelected (directive ionTab)
Il semble masquer l'onglet précédent avant d'afficher le nouveau.

Ce sale hack que j'ai fait semble fonctionner. Mais j'aimerais voir une solution appropriée.
Ajoutez simplement un délai d'attente autour de $ionicViewSwitcher.viewEleIsActive(childElement, false);

Ligne 55025 de ionic.bundle.js

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

Cela m'arrive avec :

• Ionique, v1.0.1
• Cordoue 5.3.3

J'utilise Android 5.1.1 sur un Nexus 4.

Pour le reproduire, je crée simplement une application de démarrage "onglets", change la couleur de la barre de navigation en bleu (par exemple en changeant -stable en -positive) et le scintillement devient évident. Il scintille en fait avec la barre de navigation blanche, mais vous ne pouvez pas voir le scintillement blanc sur blanc.

J'ai essayé d'ajouter des styles pour forcer le temps de transition à 0 ms sur Android et j'ai vérifié que l'application a appliqué ces styles à n'importe quel élément d'en-tête en vérifiant avec un inspecteur de chrome attaché et en inspectant les valeurs CSS calculées. J'ai vérifié deux fois en supprimant les styles et en vérifiant qu'ils étaient passés de 0 ms à un autre nombre (0,2 ms ou 0,5 ms - et en fait à peu près aussi vite que l'effet clignotant).

J'ai essayé de corriger @didbarbosa mais Chrome sur le navigateur et l'application téléphonique se sont tous deux plaints que $ timeout n'était pas défini. Lorsque j'ai enregistré la valeur de $timeout, elle n'était en effet pas définie.

@ lloy0076 vous devez l'injecter dans la directive

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

@didbarbosa - En fait, je viens de remarquer que ma version d'Ionic n'est pas la dernière version; ainsi j'ai changé mon "bower.json" pour lire :

{
"nom": "HelloIonic",
"privé": "vrai",
"devDependencies": {
"ionic": "driftyco/ionic-bower#~1",
"platform.js": "platform#~1.3.0"

... et croiriez-vous qu'il n'y a pas de scintillement même sans la solution $ timeout ...

Peut-être que si vous avez essayé la même chose avec la solution de transition CSS, cela pourrait simplement se "réparer" - bien que je déteste les problèmes qui se résolvent comme par magie.

Oui, il semble avoir disparu avec la sortie nocturne.
Bonnes nouvelles :)

En fait, ce n'est pas réglé pour moi.

pas corrigé pour moi 2 :\

Des nouvelles de ce problème ?

J'ai aussi ce problème sur iOS.

@harryzun concernant iOS, veuillez consulter https://github.com/driftyco/ionic/issues/4395

Sur iOS ce n'est pas le même problème

Je viens de commencer à remarquer cela sur Android aussi peu de temps après la mise à niveau vers la v1.1. Je ne sais pas quand ça a commencé par contre.

ça a commencé vers la v1

Si quelqu'un a une solution (temporaire), j'aimerais l'entendre.

Je suis le même bug... quelqu'un a plus d'infos ?? :poulpe:

Probablement pas lié, mais j'ai eu un problème similaire plus tôt, et pour une raison étrange, la suppression de cache: false de ma définition d'état pour l'état de l'onglet frère incriminé a résolu le problème. Je n'ai aucune idée de pourquoi, car nous utilisons ce même modèle, avec le même combo contrôleur + modèle, à 3 autres endroits dans notre configuration d'onglet sans aucun problème.

mettre à jour

J'ai donc passé un peu de temps à essayer d'aller au fond du problème que nous avons vu, un peu intéressant et un peu de naïveté de ma part a conduit au scintillement du noir avant stateChangeSuccess.

Ainsi, comme mentionné ci-dessus, nous utilisons le même modèle dans toute notre application, mais avec une différence clé : cet état avait en fait une résolution soutenue par l'API dans sa définition d'état pour contourner une lacune que nous avons actuellement sur notre back-end que nous n'avons pas doivent être pris en compte avec les autres états x3 qui utilisent ce modèle.

L'état "chat" était un frère de l'état principal de l'onglet. Pour atteindre cet état, il vous suffit de cliquer sur un membre dans la vue principale et vous vous retrouverez dans l'état de discussion entre frères et sœurs. Lors de la navigation depuis le frère, aucun flash noir n'a été observé, l'état principal serait visible jusqu'à la fin de la résolution, puis la navigation normale se terminerait. Lors du retour à l'onglet (à partir d'un autre onglet) avec la vue de discussion comme état actuel dans l'historique, ui-router + ionic exécuterait immédiatement l'échange vers le nouvel onglet, mais l'écran noir serait visible jusqu'à ce que la résolution soit terminée .

Cela a également du sens pour expliquer pourquoi la suppression de cache: false et la

C'est parfaitement logique quand on y pense, je suppose. Espérons que cela puisse sauver quelqu'un d'un mal de tête s'il tombe dessus via google (de la même manière que moi).

J'ai retracé ça jusqu'à cette ligne :
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) {

C'est la cause du scintillement d'une image lorsque les onglets sont changés, car le nouvel onglet n'est rendu visible que 16 ms plus tard.

Je ne sais pas à quoi sert cette ligne lorsque des onglets sont impliqués, mais si vous remplacez l'appel $timeout par un simple appel de méthode onReflow() , les performances perçues sont grandement améliorées et il y a plus de scintillement. Pas même dans la barre de navigation.

@mhartington des idées à ce sujet? Peut-être qu'il devrait être rendu configurable à tout le moins.

Semble être présenté par https://github.com/driftyco/ionic/commit/8ebde73d0b8afac1bf1c1787c90a72a28a88bc3a de @adamdbradley

Edit : une meilleure solution semble être de simplement changer la condition if en :

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

Edit2 : Une solution encore meilleure qui élimine les effets secondaires potentiels consiste à remplacer l'appel $timeout par :
ionic.requestAnimationFrame(onReflow);
Je vais envoyer un PR avec.

Ouverture des relations publiques https://github.com/driftyco/ionic/pull/4654

Très bien fait!
Corrige le problème pour moi.

Merci beaucoup mon pote.

Cela n'a pas fonctionné pour moi... J'ai mis à jour mon fichier ionic-angular.js mais je ne vois aucun changement même si j'augmente la valeur du délai d'attente initial. Est-ce que j'ai raté quelque chose ?
Pour le scintillement de la barre de navigation, j'ai utilisé ce correctif https://forum.ionicframework.com/t/flickering-when-navigating-via-tabs-on-android/27281 mais maintenant le contenu est-il scintillant.

Enfin ça marche mais ça clignote toujours une fois la première fois pour chaque onglet, une idée pourquoi ?

Existe-t-il un plan de sortie sur ce problème ? 1.2 ou 1.3 ?

Il est inclus dans la récente version 1.2.

+1, existe-t-il d'autres solutions ?

wow, ça continue.eh.. Pensais-tu que l'équipe principale aurait une bonne idée de ce que c'était. Quelqu'un a-t-il un bon pointeur vers le code source avec lequel nous pourrions commencer à expérimenter ?

La version 1.2 a-t-elle résolu ce problème ? Il y avait un engagement là-dedans qui aurait dû résoudre ce problème.

Le bug est toujours là sur 1.2 à 1.2.2

J'ai réessayé et c'est résolu si vous mettez :

ionic.requestAnimationFrame(onReflow);  

comme il l'a dit, et non :

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

De toute évidence, $timeout fait quelque chose

@mlynch peut-être vous souvenez-vous à quoi cela servait? https://github.com/driftyco/ionic/commit/d0246cf975bb4022eb890d3b0c28964e3065644c#diff -e25bdd32bda2f4f00f01c823ec86b1f3

Semble l'avoir encore cassé.

C'est peut-être pour ça :

si le code est mis en file d'attente à l'aide de $ timeout, il devrait s'exécuter après que le DOM a été manipulé par Angular et après le rendu du navigateur (ce qui peut provoquer un scintillement dans certains cas)

Révision pour 1.2.5

Malheureusement, cela a cassé #4782, ce qui a parfois empêché la vue arrière de s'animer correctement. Supprimer $timeout est probablement une solution trop simpliste pour cela.

j'ai toujours le problème même lorsque je supprime le délai d'attente ..

+1

J'ai aussi ces problèmes...

+1

+1

Remarque, la mise à jour de votre bower.json aide (mise en évidence correcte), mais il y a un léger retard comme mentionné

{
"nom": "HelloIonic",
"privé": "vrai",
"devDependencies": {
"ionic": "driftyco/ionic-bower#1.7.12", //ICI, ASSUREZ-VOUS QUE C'EST MIS À JOUR
"aws-sdk-js": "~2.0.9",
"bootstrap": "~3.2.0",
"platform.js": "platform#~1.3.1"
}
}

Quoi qu'il en soit, le léger flash n'est que sur Android, et ce n'est qu'une fraction de seconde.

Quelqu'un peut-il confirmer que 1.2.3 "copenhagen" résout ce problème ?

@mhartington @mlynch Je peux confirmer que cette propriété ne fonctionne toujours pas avec la version 1.2.3. Jetez un œil à cette séquence de captures d'écran.

Je commence d'abord sur mon onglet Factures comme ceci :

J'appuie ensuite sur mon onglet Colocataires et les étapes suivantes se produisent (ce qui provoque le clignotement):

1. L'application indique « Facturation » pour le titre mais affiche l'onglet « Colocataires » mis en cache
   
2. L'application supprime ensuite tout le contenu, mais affiche toujours le titre "Bills"
   
3. L'application affiche le contenu "Colocataires"
   
4. L'application s'estompe dans le titre "Colocataires"
   

Avec toutes ces étapes combinées, cela crée un scintillement hideux lors du changement d'onglet.

Pour voir le bug en cause, jetez un œil à cette vidéo :
https://dl.dropboxusercontent.com/u/97539058/Bugs/tabs-bug.mp4

Hé, j'ai réalisé que mon bogue était un problème avec l'utilisation de SQLite dans mon application. Désolé pour la confusion.

+1

+1

+1

Cela semble être un problème de délai d'attente

le problème vient de disparaître pour moi! le problème était lié à la façon dont j'avais construit mes onglets !
assurez-vous de le construire dans le bon sens, la navigation dans les onglets également. attention aux contrôleurs parents ==> enfant

plus de flash blanc

@princefr pourriez-vous développer

Pour iOS, j'ai dû remplacer css[ionic.CSS.TRANSITION_DURATION] par css.WebkitTransition dans ionic.bundle.js ligne 47715 et 47750

`// Transitions iOS
// -----------------------
provider.transitions.views.ios = function(enteringEle, laissantEle, 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, laissantHeaderBar, 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;

};`

Semble être corrigé pour moi lorsque j'ai changé cette ligne https://github.com/driftyco/ionic/blob/master/js/angular/service/viewSwitcher.js#L142 pour être :

callback && ionic.requestAnimationFrame(callback);

Je ne sais pas si c'est une bonne façon de résoudre ce problème.

Cela se produit-il également sur certaines versions d'iOS (en rappelant que le rapport concerne les versions d'Android) ?

De : Abdul Wahab [mailto:[email protected]]
Envoyé : mercredi 10 février 2016 21:59
À : driftyco/ionic [email protected]
Cc : David Lloyd [email protected]
Objet : Re : [ionic] bug : un flash blanc apparaît lors du basculement entre les onglets sur Android (#3907)

Pour iOS, j'ai dû remplacer css[ionic.CSS.TRANSITION_DURATION] par css.WebkitTransition dans ionic.bundle.js ligne 47715 et 47750

`// Transitions iOS
// -----------------------
provider.transitions.views.ios = function(enteringEle, laissantEle, direction, shouldAnimate) {

function setStyles(ele, opacity, x, boxShadowOpacity) {
var css = {};
css.WebkitTransition = d.devraitAnimer ? '' : 0;
css.opacity = opacité;
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 = {
exécuter : fonction (étape) {
if (direction == 'en avant') {
setStyles(enteringEle, 1, (1 - étape) * 99, 1 - étape); // à partir de 98% empêche un scintillement
setStyles(leavingEle, (1 - 0,1 * pas), pas * -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 == 'en avant' || direction == 'en arrière')
} ;

retour d;

} ;

provider.transitions.navBar.ios = function(enteringHeaderBar, laissantHeaderBar, direction, shouldAnimate) {

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

ctrl.setCss('boutons-gauche', css);
ctrl.setCss('boutons-droit', 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('titre', css);
}

fonction enter(ctrlA, ctrlB, étape) {
si (!ctrlA || !ctrlB) retourne ;
var titleX = (ctrlA.titleTextX() + ctrlA.titleWidth()) * (1 - étape);
var backTextX = (ctrlB && (ctrlB.titleTextX() - ctrlA.backButtonTextLeft()) * (1 - step)) || 0 ;
setStyles(ctrlA, step, titleX, backTextX);
}

fonction laisser (ctrlA, ctrlB, étape) {
si (!ctrlA || !ctrlB) retourne ;
var titleX = (-(ctrlA.titleTextX() - ctrlB.backButtonTextLeft()) - (ctrlA.titleLeftRight())) * étape ;
setStyles(ctrlA, 1 - étape, titreX, 0);
}

var d = {
exécuter : fonction (étape) {
var enterHeaderCtrl = enterHeaderBar.controller();
var laissantHeaderCtrl = laissantHeaderBar && laissantHeaderBar.controller();
if (d.direction == 'retour') {
laisser(enteringHeaderCtrl, laissantHeaderCtrl, 1 - étape);
enter(quitterHeaderCtrl, enterHeaderCtrl, 1 - étape);
} autre {
enter(enteringHeaderCtrl, laissantHeaderCtrl, step);
laisser(quitterHeaderCtrl, enterHeaderCtrl, step);
}
},
sens : sens,
shouldAnimate: shouldAnimate && (direction == 'en avant' || direction == 'en arrière')
} ;

retour d;

};`

-
Répondez directement à cet e-mail ou consultez-le sur GitHub https://github.com/driftyco/ionic/issues/3907#issuecomment -182324500 . https://github.com/notifications/beacon/ABHsBD1Sp3tXsq8707UTfdVHgqSlxI0zks5pixaSgaJpZM4E82pl.gif

+1
clignote sur android..

1+

+1

les gars juste " cache : true " dans votre " état " afin que votre page ait été mise en cache avant l'extraction et le rendu se passe bien

@Harish-here Et la première fois ?

Ouais, ce n'est vraiment pas une bonne idée d'utiliser le cache : vrai uniquement pour ces fins

@Harish-ici. . J'ai une application qui utilise le même état pour différentes pages. C'est-à-dire qu'il s'agit d'une vue détaillée qui prend des paramètres $state. Comme c'est la même vue avec un contenu différent, je ne peux pas utiliser cache:false :)
Et cela ne semble pas non plus être une bonne idée pour ce problème particulier

Toujours le même problème ici sous 1.2.4-nightly-1917

+1

@princefr - oui, veuillez préciser quel serait le balisage approprié pour les onglets afin de résoudre ce problème

@princefr s'il vous plaît si vous pouvez élaborer sur la structure des onglets

C'est toujours un problème pour moi et assez frustrant. Y a-t-il un mouvement, ou une résolution comprise ?

+1

+1

En regardant dans ce demain les gens! :sourire:

Il y a un problème connexe avec iOS que je vais lier ici plus tard ce soir. J'ai pu le reproduire.

Merci @mhartington !

Pour ajouter un peu plus de contexte, dans ma situation, j'ai trouvé que le bogue était présent avec les éléments suivants :

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

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

sous-vue-1.html
<ANY></ANY>

Mais PAS présent lorsque j'ai supprimé le <ANY ELEMENT> de view-1.html.

C'est donc, dans mon cas, que je suis incapable d'obtenir l'effet souhaité de montrer un état enfant à l'intérieur d'un état parent, sans remplacer complètement le contenu de l'état parent.

J'ai essayé TOUTES les manières d'ui-view/ion-view/ion-nav-view/ion-tabs/ion-pane/etc. Absolument rien n'a fonctionné.

Ce problème décrit le même bug mais sur iOS https://github.com/driftyco/ionic/issues/5888

@mhartington pouvez-vous tester avec l'application de conférence ? Moi et @brandy avons tous deux pu reproduire un léger flash lors du passage des onglets. Cela utilisait l'émulateur et non un appareil réel.

Le bogue dans #5888 est pour ionic2, je ne suis pas sûr que les bases de code soient suffisamment similaires pour que ce soit le même bogue.

Salut à tous, merci d'avoir été patient sur celui-ci, j'apprécie vraiment :sourire:

Donc, en regardant les choses, cela devrait affecter à la fois iOS et Android avec ionic 1.2.4, n'est-ce pas ?

De plus, quelqu'un a-t-il pu recréer cela avec l'application de démarrage des onglets ?

@mhartington c'est là dans l'application de démarrage des onglets, il vous suffit d'être très observateur. De plus, j'ai corrigé cela dans https://github.com/driftyco/ionic/pull/4654 mais apparemment, cela a cassé quelque chose d'autre, puis quand cela a été corrigé, cela a de nouveau été cassé.

Vous pouvez le voir dans la vidéo que vous avez postée : https://www.youtube.com/watch?v=_ja8a08iSPE&feature=youtu.be Remarquez juste comment au lieu que le nouvel onglet apparaisse, il y a un flash blanc très bref (1 image, c'est très rapide).

@andreialecu d' accord, je le vois aussi,

https://youtu.be/R5EafRKTst0

Même clip, juste beaucoup ralenti

En regardant le PR, aller voir ce qui peut être fait et l'empêcher de casser d'autres choses :grin:

Salut à tous! Je pense donc que j'ai pu avancer un peu là-dessus. J'ai ouvert un PR qui semble bon dans mes tests, mais j'aimerais d'abord entendre vos commentaires.

Les modifications ont été apportées à la branche viewFlicker

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

Si cela ne vous dérange pas de retirer le code, de créer Ionic à partir de la source et de tester les modifications dans votre application, nous pouvons voir si cela résout les problèmes et élimine ce bogue :shipit:

Impressionnant. Est-ce un renard spécifique à Android ou iOS sera-t-il également meilleur ?

@ctcampbell android guichet automatique. Lors de mes tests, je n'ai pas pu provoquer de scintillement sur iOS

Voici une vidéo rapide de démonstration du PR

https://youtu.be/nWSuocu64FU

+1

@jordantomax est-ce que cela signifie que le PR fonctionne bien pour vous ? :sourire:

Oups, non désolé. Il suffit de s'abonner au flux. Je peux quand même le tester. Ai-je besoin de compiler quelque chose pour pouvoir l'utiliser, je vois que la version n'a pas été touchée par votre commit.

Ahhh

Vous pouvez suivre ces étapes.

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

Et vous devriez avoir le code compilé dans dist/js/ionic.bundle.js
Vous devriez pouvoir simplement copier/coller ce code dans un projet de test et l'essayer.

Semble bien fonctionner dans l'application des onglets de test. Cependant, j'ai toujours des problèmes avec le flash dans mon application. J'utilise des onglets et un menu, mais les onglets n'apparaissent que sur certaines pages. Je veux faire une vidéo pour vous montrer, comment dois-je procéder?

Seriez-vous plutôt en mesure de créer un codepen minimal ou un dépôt git que je pourrais cloner et tester ?
Juste une configuration similaire de votre application

Bonne idée. Je vais essayer de faire ça ce soir ou demain matin. Merci de votre aide.

@mhartington Je viens de le tester dans mon application et le scintillement semble avoir disparu. :+1:

J'ai testé le correctif à l'aide du démarreur d'onglets sur un Nexus 6 exécutant l'aperçu Android N, un Nexus 7 2013 exécutant 6.0.1, un Moto X 2014 exécutant 5.1 et un Nexus 7 2013 exécutant 4.4.4 et je n'ai vu aucun clignotement sur aucun de ces appareils. Impressionnant !

@jordantomax a-t-il eu de la chance pour rassembler cet exemple ?

@mhartington désolé, j'ai été totalement submergé ! J'espère travailler dessus dimanche.

@mhartington Je viens de tester cela sur mon application que je construis et Android et iPhone semblent être corrigés avec #5937.

@jordantomax , avez-vous eu l'occasion de mettre en place un exemple ?

Merci,
Dan

Salut,

Ce correctif fonctionne bien, mais il semble que le plugin native-page-transitions ne fonctionne pas correctement... les transitions font des choses folles après que j'ai mis ce correctif. Pensez-vous que c'est lié ?

@tgensol Utilise les paramètres par défaut pour ce plugin, ça marche bien avec ce correctif !

Bonjour à tous! Comme il semble à travers mes tests et que vous testiez le correctif semble fonctionner, je vais continuer et fermer ce problème pour le moment. @jordantomax si vous avez l'occasion de lancer ce test ensemble, n'hésitez pas à publier et je rouvrirai volontiers (:. Aussi @tgensol si la solution ci-dessus ne résout pas votre problème, cela vous dérangerait-il d'ouvrir un problème séparé à l'heure du bogue ? Merci tout le monde!

Avec les changements de rupture dans le dépôt ionique, comment compilons-nous et construisons-nous ce

1.x branche 1.3.1 . Si vous clonez le référentiel et extrayez la branche, vous devriez pouvoir exécuter gulp build pour générer les fichiers distribuables. S'il vous plaît laissez-moi savoir si vous avez des problèmes avec cela.

Merci,
Dan

Merci. déjà téléchargé la dist manuellement :D

+1

J'ai corrigé cela. Cela se produit en raison du comportement de la barre ionique mise à jour de la vue ionique : nouvelle barre créée avant d'entrer et masque l'ancienne barre (actuelle) et elle clignote. La solution est de différer le masquage de la barre actuelle après l'événement d'entrée. S'il vous plaît écrivez-moi si vous avez des questions.

@smcreator pourriez-vous partager les extraits de code ?

J'ai toujours le même problème .... des extraits de code Merci

Je pense que ce problème est résolu dans les versions ioniques récentes.

J'ai eu le même problème et la réponse de @princefr a été la clé. J'avais plusieurs barres de navigation sur les vues. En ajoutant le ion-nav-bar uniquement en haut de mon fichier tabs.html , j'ai résolu le problème :

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

Merci pour le problème ! Ce problème est verrouillé pour empêcher les commentaires qui ne sont pas pertinents pour le problème d'origine. Si le problème persiste avec la dernière version d'Ionic, veuillez créer un nouveau problème et vous assurer que le modèle est entièrement rempli.