Ionic-framework: bug: flash branco aparecendo ao alternar entre as guias no Android

Alguma palavra sobre o status desse problema?

Tendo o mesmo problema. Alguma atualização?

+1

Forneça um exemplo mínimo que tenha esse problema.

Basta criar um novo aplicativo iônico (modelo de guias) e mudar o plano de fundo para qualquer cor que não seja o branco. compilar e executar no dispositivo Android (4.4, fui testado no Nexus 5) e você notará que há um movimento branco por alguns milissegundos a cada mudança de guia.

Descobri que isso se deve à redefinição da barra de cabeçalho de íons em cada visualização. Mudei a barra de cabeçalho de íons para o meu modelo de layout principal e não vejo mais a oscilação. Acredito que o projeto gerado padrão coloca a barra de cabeçalho em cada visualização, e é por isso que você a vê lá também.

a 'barra de cabeçalho de íons é gerada automaticamente para mim, onde (e como) você a usa manualmente?

Então, @GentryRiggen, você quer dizer a barra de navegação ion?

@mhartington Estou usando o menu do lado do íon com guias de íons dentro do conteúdo do menu do lado do íon.

<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ão use a barra de cabeçalho de íons para isso, use a barra de navegação de íons.

@mhartington Estou usando a 'barra de navegação iônica' e a tela piscando (ao mover entre as guias) ...
então como você sugere consertar isso?

as guias simples "starter" do ionic construído para android mostram o flash entre navegar e que eu acredito que usa ion-nav-bar.

Hmm, não estou vendo isso em meus testes.

https://youtu.be/_ja8a08iSPE

Você pode ver no vídeo .. É o flash da tela branca quando você muda de guia .. Ele aparece por apenas alguns milissegundos ... Se você quiser ver isso mais claramente, mude a cor de fundo para vermelho, azul ou qualquer cor escura.

Você está falando sobre o desbotamento da barra de navegação

Ele está falando sobre a tela branca (perímetro de conteúdo de íons) que aparece brevemente quando você alterna as guias.
Você pode ver isso claramente em seu vídeo quando muda pela primeira vez de "Status" para "Bate-papos". Mas, na verdade, sempre aparece.

@mhartington Anexei um vídeo do meu aplicativo (câmera lenta), você pode ver claramente anexado lá.
Eu gostaria de agir e ajudar vocês a resolver esse problema, mas preciso de pelo menos um ponto de partida de vocês ... por onde devo começar?

link do youtube: https://youtu.be/TTuNPlL6Fmg

Obrigado.

Eu olhei o código e para mim o erro está na função tabSelected (diretiva ionTab)
Parece ocultar a guia anterior antes de mostrar a nova.

Este hack sujo que fiz parece funcionar. Mas adoraria ver uma solução adequada.
Basta adicionar um tempo limite em torno de $ ionicViewSwitcher.viewEleIsActive (childElement, false);

Linha 55025 de ionic.bundle.js

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

Isso está acontecendo comigo com:

• Ionic, v1.0.1
• Cordova 5.3.3

Estou executando o Android 5.1.1 em um Nexus 4.

Para reproduzi-lo, eu simplesmente crio um aplicativo inicial de "guias", altero a cor da barra de navegação para azul (por exemplo, alterando -stable para -positivo) e a cintilação se torna óbvia. Ele realmente pisca com a barra de navegação branca, mas você não pode ver o branco piscando.

Tentei adicionar estilos para forçar o tempo de transição para 0 ms no Android e verifiquei se o aplicativo aplicou esses estilos a qualquer item de cabeçalho, verificando com um inspetor cromado anexado e inspecionando os valores CSS calculados. Eu verifiquei duas vezes removendo os estilos e verificando se eles iam de 0 ms para algum outro número (0,2 ms ou 0,5 ms - e na verdade quase tão rápido quanto o efeito de piscar).

Tentei fazer a correção @didbarbosa, mas o Chrome no navegador e no aplicativo do telefone reclamaram que $ timeout não foi definido. Quando loguei o valor de $ timeout, ele realmente não estava definido.

@ lloy0076 você precisa injetá-lo na diretiva

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

@didbarbosa - Na verdade, acabei de notar que minha versão do Ionic não é o lançamento mais recente; portanto, mudei meu "bower.json" para ler:

{
"nome": "HelloIonic",
"privado": "verdadeiro",
"devDependencies": {
"iônico": "driftyco / ionic-bower # ~ 1",
"platform.js": "platform # ~ 1.3.0"

... e você acredita que não há oscilação, mesmo sem a solução $ timeout ...

Talvez se você tentasse o mesmo com a solução de transição CSS, ela poderia "consertar" a si mesma - embora eu odeie problemas que se consertam magicamente assim.

Sim, parece ter desaparecido com o lançamento noturno.
Boas notícias :)

Na verdade, não é fixo para mim.

não corrigido para mim 2: \

Alguma notícia sobre este assunto?

Eu também tenho esse problema no iOS.

@harryzun em relação ao iOS, consulte https://github.com/driftyco/ionic/issues/4395

No iOS não é o mesmo problema

Eu comecei a perceber isso no Android também algum tempo depois de fazer o upgrade para a v1.1. Não tenho certeza de quando começou.

começou por volta da v1

Se alguém tiver uma solução (temporária), eu adoraria saber.

Eu sou o mesmo bug ... alguém tem mais informações ?? :polvo:

Provavelmente não relacionado, mas eu tive um problema semelhante antes e, por alguma razão bizarra, excluir cache: false da minha definição de estado para o estado da guia de irmão ofensivo resolveu o problema. Não tenho ideia do porquê, já que estamos usando esse mesmo padrão, com a mesma combinação controlador + modelo, em 3 outros lugares em nossa configuração de guia sem qualquer problema.

atualizar

Então, passei um pouco de tempo tentando chegar ao fundo do problema que vimos, meio interessante e um pouco de ingenuidade da minha parte que levou ao piscar de preto antes de stateChangeSuccess.

Como mencionado acima, usamos o mesmo padrão em todo o nosso aplicativo, mas com uma diferença fundamental: este estado na verdade tinha uma resolução apoiada pela API em sua definição de estado para contornar uma deficiência que atualmente temos em nosso back end que não tínhamos precisa ser contabilizado com os outros estados x3 que usam esse padrão.

O estado "chat" era irmão do estado principal da guia. Para chegar a este estado, você simplesmente clica em um membro na visualização principal e termina no estado de chat entre irmãos. Ao navegar nele a partir do irmão, nenhum flash preto foi observado, o estado principal seria visível até que a resolução fosse concluída, e então a navegação normal terminaria. Ao navegar de volta para a guia (de outra guia) com a visualização do chat como o estado atual no histórico, ui-router + ionic executaria a troca para a nova guia imediatamente, mas a tela preta ficaria visível até que a resolução fosse concluída .

Isso também faz sentido porque remover cache: false e definir como verdadeiro corrigiu o problema.

Faz todo o sentido quando você pensa sobre isso, eu acho. Esperançosamente, isso pode salvar alguém de uma dor de cabeça se eles toparem com isso via google (da mesma forma que eu fiz).

Eu rastreei esta linha:
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) {

É a causa da oscilação de um quadro quando as guias são trocadas, porque a nova guia não é definida como visível até 16 ms depois.

Não tenho certeza de qual é o objetivo dessa linha quando as guias estão envolvidas, mas se você substituir a chamada $timeout por uma chamada de método simples de onReflow() , o desempenho percebido é muito melhorado e há não há mais cintilação. Nem mesmo na barra de navegação.

@mhartington alguma opinião sobre isso? Talvez deva ser no mínimo configurável.

Parece ser apresentado por https://github.com/driftyco/ionic/commit/8ebde73d0b8afac1bf1c1787c90a72a28a88bc3a de @adamdbradley

Editar: uma solução melhor parece ser apenas alterar a condição if para:

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

Edit2: Uma correção ainda melhor que elimina quaisquer efeitos colaterais em potencial é substituir a chamada $timeout por:
ionic.requestAnimationFrame(onReflow);
Enviarei um PR com ele.

PR aberto https://github.com/driftyco/ionic/pull/4654

Muito bem feito!
Corrige o problema para mim.

Muito obrigado amigo.

Não funcionou para mim ... Atualizei meu arquivo ionic-angular.js, mas não vejo nenhuma alteração, mesmo se estou aumentando o valor de tempo limite inicial. Estou esquecendo de algo?
Para a oscilação da barra de navegação, usei esta correção https://forum.ionicframework.com/t/flickering-when-navigating-via-tabs-on-android/27281, mas agora o conteúdo está piscando.

Finalmente está funcionando, mas ainda está piscando uma vez na primeira vez para cada guia, alguma ideia do porquê?

Existe algum plano de lançamento para este problema? 1,2 ou 1,3?

Ele está incluído na versão 1.2 recente.

+1, há alguma outra solução?

uau, isso ainda está acontecendo.eh ... Estava imaginando que a equipe principal teria uma boa ideia do que isso era. Alguém tem um bom ponteiro para o código-fonte que podemos começar a experimentar?

1.2 corrigiu isso? Havia um commit lá que deveria ter abordado esse problema.

O bug ainda está aqui em 1.2 a 1.2.2

Tentei de novo e fica resolvido se você colocar:

ionic.requestAnimationFrame(onReflow);  

como ele disse, e não:

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

Obviamente, $ timeout está fazendo algo

@mlynch talvez você se lembre para que era isso? https://github.com/driftyco/ionic/commit/d0246cf975bb4022eb890d3b0c28964e3065644c#diff -e25bdd32bda2f4f00f01c823ec86b1f3

Parece que quebrou de novo.

Talvez seja por isso:

se o código estiver na fila usando $ timeout, ele deve ser executado após o DOM ter sido manipulado pelo Angular e após a renderização do navegador (o que pode causar oscilação em alguns casos)

Revisando para 1.2.5

Infelizmente, isso quebrou o # 4782, que fazia com que a vista traseira às vezes não fosse animada corretamente. Remover $timeout é provavelmente uma solução muito simplista para isso.

ainda tenho o problema mesmo quando eu removo o tempo limite.

+1

Também tenho esses problemas ...

+1

+1

observe que atualizar seu bower.json ajuda (realce correto), mas há um pequeno atraso, conforme mencionado

{
"nome": "HelloIonic",
"privado": "verdadeiro",
"devDependencies": {
"ionic": "driftyco / ionic-bower # 1.7.12", // AQUI, CERTIFIQUE-SE DE QUE ESTÁ ATUALIZADO
"aws-sdk-js": "~ 2.0.9",
"bootstrap": "~ 3.2.0",
"platform.js": "platform # ~ 1.3.1"
}
}

De qualquer forma, o leve flash é apenas no Android, e é apenas uma fração de segundo.

Alguém pode confirmar se 1.2.3 "copenhagen" corrige esse problema?

@mhartington @mlynch Posso confirmar que esta propriedade ainda não funciona com a versão 1.2.3. Dê uma olhada nesta sequência de capturas de tela.

Estou começando na minha guia Faturas assim:

Em seguida, toco na guia Companheiros de quarto e as seguintes etapas ocorrem (o que faz com que pisque):

1. O aplicativo diz "Contas" como título, mas mostra a guia "Companheiros de quarto" em cache
   
2. O aplicativo remove todo o conteúdo, mas ainda mostra o título "Contas"
   
3. App mostra conteúdo de "Companheiros de quarto"
   
4. O app desaparece no título "Companheiros de quarto"
   

Com todas essas etapas combinadas, ele cria uma tremulação horrível ao alternar entre as guias.

Para ver o bug em efeito, dê uma olhada neste vídeo:
https://dl.dropboxusercontent.com/u/97539058/Bugs/tabs-bug.mp4

Ei, percebi que meu bug era um problema com o uso de SQLite em meu aplicativo. Desculpe pela confusão.

+1

+1

+1

Parece um problema de tempo limite

o problema simplesmente desapareceu para mim! o problema estava relacionado à maneira como criei minhas guias!
certifique-se de construí-lo da maneira correta, navegação dentro das guias também. cuidar dos pais controladores ==> filho

sem mais flash branco

@princefr, poderia explicar melhor?

Para iOS, tive que substituir css [ionic.CSS.TRANSITION_DURATION] por css.WebkitTransition na linha ionic.bundle.js 47715 e 47750

`// Transições iOS
// -----------------------
provedor.transitions.views.ios = função (entrandoEle, saindoEle, direção, deveriaAnimado) {

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;

};

provedor.transições.navBar.ios = função (entrandoHeaderBar, saindoHeaderBar, direção, deveriaAnimar) {

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;

}; `

Parece que foi corrigido para mim quando mudei esta linha https://github.com/driftyco/ionic/blob/master/js/angular/service/viewSwitcher.js#L142 para ser:

callback && ionic.requestAnimationFrame(callback);

Não tenho certeza se é uma maneira correta de corrigir isso.

Isso também ocorre em algumas versões do iOS (lembrando que o relatório é sobre versões do Android)?

De: Abdul Wahab [mailto: [email protected]]
Enviado: quarta-feira, 10 de fevereiro de 2016 21:59
Para: driftyco / ionic [email protected]
Cc: David Lloyd [email protected]
Assunto: Re: bug [iônico]: flash branco aparecendo ao alternar entre as guias no Android (# 3907)

Para iOS, tive que substituir css [ionic.CSS.TRANSITION_DURATION] por css.WebkitTransition na linha ionic.bundle.js 47715 e 47750

`// Transições iOS
// -----------------------
provedor.transitions.views.ios = função (entrandoEle, saindoEle, direção, deveriaAnimado) {

function setStyles (ele, opacity, x, boxShadowOpacity) {
var css = {};
css.WebkitTransition = d.shouldAnimate? '': 0;
css.opacity = opacidade;
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 (entrandoEle, 1, (1 - etapa) * 99, 1 - etapa); // começando em 98% evita uma oscilação
setStyles (leaveEle, (1 - 0,1 * etapa), etapa * -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;

};

provedor.transições.navBar.ios = função (entrandoHeaderBar, saindoHeaderBar, direção, deveriaAnimar) {

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

ctrl.setCss ('botões esquerdo', css);
ctrl.setCss ('botões-direito', css);
ctrl.setCss ('botão de voltar', css);

css [ionic.CSS.TRANSFORM] = 'translate3d (' + backTextX + 'px, 0,0)';
ctrl.setCss ('texto de volta', css);

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

função enter (ctrlA, ctrlB, passo) {
if (! ctrlA ||! ctrlB) retorna;
var titleX = (ctrlA.titleTextX () + ctrlA.titleWidth ()) * (1 - passo);
var backTextX = (ctrlB && (ctrlB.titleTextX () - ctrlA.backButtonTextLeft ()) * (1 - passo)) || 0;
setStyles (ctrlA, step, titleX, backTextX);
}

função deixar (ctrlA, ctrlB, passo) {
if (! ctrlA ||! ctrlB) retorna;
var titleX = (- (ctrlA.titleTextX () - ctrlB.backButtonTextLeft ()) - (ctrlA.titleLeftRight ())) * etapa;
setStyles (ctrlA, 1 - passo, titleX, 0);
}

var d = {
run: function (step) {
var entrandoHeaderCtrl = entrandoHeaderBar.controller ();
var leaveHeaderCtrl = leaveHeaderBar && leaveHeaderBar.controller ();
if (d.direction == 'back') {
sair (inserirHeaderCtrl, sairHeaderCtrl, 1 - passo);
enter (deixandoHeaderCtrl, entrandoHeaderCtrl, 1 - passo);
} outro {
enter (inserirHeaderCtrl, sairHeaderCtrl, passo);
sair (deixandoHeaderCtrl, entrandoHeaderCtrl, passo);
}
},
direção: direção,
shouldAnimate: shouldAnimate && (direction == 'forward' || direction == 'back')
};

return d;

}; `

-
Responda a este e-mail diretamente ou visualize-o no GitHub https://github.com/driftyco/ionic/issues/3907#issuecomment -182324500. https://github.com/notifications/beacon/ABHsBD1Sp3tXsq8707UTfdVHgqSlxI0zks5pixaSgaJpZM4E82pl.gif

+1
pisca no android ..

1+

+1

caras apenas " cache: true " em seu " estado " para que sua página seja armazenada em cache antes de extrair e renderizar sem problemas

@ Harish-here E a primeira vez?

Sim, realmente não é uma boa ideia usar cache: verdadeiro apenas para esses fins

@ Harish-aqui. . Tenho um aplicativo que usa o mesmo estado para páginas diferentes. Ou seja, é uma visão detalhada que leva alguns parâmetros de $ state. Como é a mesma visualização com conteúdo diferente, não posso usar cache: false :)
E também não parece uma boa ideia para este problema específico

Ainda o mesmo problema aqui rodando 1.2.4-nightly-1917

+1

@princefr - sim, explique qual seria a marcação adequada para as guias para aliviar esse problema

@princefr, por favor, se você puder elaborar sobre a estrutura da guia

Isso ainda é um problema para mim e bastante frustrante. Existe algum movimento ou alguma resolução compreendida?

+1

+1

Olhando para isso amanhã pessoal! :sorriso:

Há um problema relacionado com o iOS que irei vincular aqui mais tarde esta noite. Eu fui capaz de reproduzi-lo.

Obrigado @mhartington!

Para adicionar mais contexto, na minha situação descobri que o bug estava presente com o seguinte:

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

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

sub-view-1.html
<ANY></ANY>

Mas NÃO presente quando removi <ANY ELEMENT> de view-1.html.

Portanto, no meu caso, não consigo atingir o efeito desejado de mostrar um estado-filho dentro de um estado-pai, sem substituir completamente o conteúdo do estado-pai.

Eu tentei TODAS as formas de ui-view / ion-view / ion-nav-view / ion-tabs / ion-pane / etc. Absolutamente nada funcionou.

Este problema descreve o mesmo bug, mas no iOS https://github.com/driftyco/ionic/issues/5888

@mhartington você pode testar com o aplicativo de conferência? Eu e @brandy conseguimos reproduzir um leve flash ao alternar entre as guias. Isso estava usando o emulador e não um dispositivo real.

O bug em # 5888 é para ionic2, porém, não tenho certeza se as bases de código são semelhantes o suficiente para ser o mesmo bug.

ei pessoal, obrigado por ser paciente neste, realmente agradeço: sorria:

Então, olhando para as coisas, isso deve afetar iOS e Android com o ionic 1.2.4, correto?

Além disso, alguém conseguiu recriar isso com o aplicativo inicializador de guias?

@mhartington está lá no aplicativo inicial de guias, você só precisa estar muito atento. Além disso, eu consertei isso em https://github.com/driftyco/ionic/pull/4654, mas aparentemente isso quebrou outra coisa e, quando isso foi corrigido, estava quebrado novamente.

Você pode ver no vídeo que postou: https://www.youtube.com/watch?v=_ja8a08iSPE&feature=youtu.be Observe como, em vez de a nova guia aparecer, há um breve flash branco (1 quadro, é muito rápido).

@andreialecu tudo bem, vendo isso também,

https://youtu.be/R5EafRKTst0

Mesmo clipe, só diminuiu muito

Olhando para o PR, ver o que pode ser feito e evitar que ele atrapalhe outras coisas: sorriso:

Olá a todos! Então eu acho que fui capaz de fazer alguma coisa nesse sentido. Abri um PR que parece bom em meus testes, mas adoraria ouvir alguns comentários seus primeiro.

As mudanças foram feitas para viewFlicker branch

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

Se você não se importasse de puxar para baixo o código, construir Ionic a partir da fonte e testar as mudanças em seu aplicativo, podemos ver se isso corrige as coisas e eliminar este bug: shipit:

Incrível. Esta é uma raposa específica do Android ou o iOS também terá uma aparência melhor?

@ctcampbell android ATM. Em meus testes, não consegui causar oscilação no iOS

Aqui está um vídeo rápido demonstrando o PR

https://youtu.be/nWSuocu64FU

+1

@jordantomax isso significa que o PR funciona bem para você? :sorriso:

Opa, não, desculpe. Apenas se inscrevendo no feed. Eu posso testar isso. Preciso compilar algo para usar, vejo que o release não foi tocado pelo seu commit.

Ahh

Você pode seguir estas etapas.

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

E você deve ter o código compilado em dist/js/ionic.bundle.js
Você deve ser capaz de apenas copiar / colar esse código em um projeto de teste e testá-lo.

Parece estar funcionando bem no aplicativo de guias de teste. Ainda estou tendo problemas com o flash em meu aplicativo. Estou usando guias e menu, mas as guias aparecem apenas em algumas páginas. Quero fazer um vídeo para mostrar a vocês, como faço para fazer isso?

Em vez disso, você seria capaz de criar um codepen ou repo git mínimo que eu pudesse clonar e testar?
Apenas uma configuração semelhante de seu aplicativo

Boa ideia. Vou tentar fazer isso hoje à noite ou amanhã de manhã. Obrigado pela ajuda.

@mhartington Acabei de testá-lo no meu aplicativo e a cintilação parece ter sumido. : +1:

Eu testei a correção usando o iniciador de guias em um Nexus 6 rodando o Android N preview, um Nexus 7 2013 rodando 6.0.1, um Moto X 2014 rodando 5.1 e um Nexus 7 2013 rodando 4.4.4 e não vi nenhum piscar qualquer um desses dispositivos. Incrível !

@jordantomax teve sorte em conseguir esse exemplo?

@mhartington desculpe, foram totalmente inundados! Espero trabalhar nisso no domingo.

@mhartington Acabei de testar isso no meu aplicativo que estou construindo e o Android e o iPhone parecem estar corrigidos com o # 5937.

@jordantomax , você já teve a chance de montar um exemplo?

Obrigado,
Dan

Olá,

Esta correção funciona bem, mas parece que o plug-in de transições de página nativa não está funcionando corretamente ... as transições estão fazendo coisas malucas depois que eu coloco essa correção. Você acha que está vinculado?

@tgensol Use parâmetros padrão para esses plug-ins, ele funciona bem com essa correção!

Olá a todos! Ao que parece, através dos meus testes e de vocês, a correção parece estar funcionando, vou prosseguir e encerrar este problema por enquanto. @jordantomax se você tiver a chance de fazer esse teste, fique à vontade para postar e eu terei prazer em reabri-lo (:. Também @tgensol, se a solução acima não corrigir o seu problema, você se importaria de abrir um outro problema na hora do bug? Obrigado a todos!

Com as mudanças significativas no repo iônico, como podemos compilar e construir este

1.x branch agora é iônico 1.3.1 . Se você clonar o repo e verificar o branch, deverá conseguir executar gulp build para gerar os arquivos distribuíveis. Informe-nos se tiver problemas com isso.

Obrigado,
Dan

Obrigado. já baixei o dist manualmente: D

+1

Eu consertei isso. Isso acontece relacionado à atualização da vista iônica barra iônica bevavior: nova barra criada antes de entrar e oculta a barra antiga (atual) e pisca. A solução é adiar a ocultação da barra atual para depois de inserir o evento. Por favor, escreva para mim se você tiver alguma dúvida.

@smcreator você poderia compartilhar os trechos de código?

Eu ainda tenho o mesmo problema ... qualquer trecho de código Obrigado

Acho que esse problema foi corrigido nas versões iônicas recentes.

Eu tive o mesmo problema e a resposta de @princefr foi a chave. Eu tinha várias barras de navegação nas visualizações. Ao adicionar ion-nav-bar apenas na parte superior do meu arquivo tabs.html resolvi o problema:

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

Obrigado pelo problema! Este problema está sendo bloqueado para evitar comentários que não são relevantes ao problema original. Se isso ainda for um problema com a versão mais recente do Ionic, crie um novo problema e certifique-se de que o modelo esteja totalmente preenchido.