Ionic-framework: error: aparece un destello blanco al cambiar entre pestañas en Android

¿Alguna palabra sobre el estado de este problema?

Tener el mismo problema. ¿Alguna actualización?

+1

Proporcione un ejemplo mínimo que tenga este problema.

Simplemente cree una nueva aplicación iónica (plantilla de pestañas) y cambie el fondo a cualquier color, ya sea a blanco. compile y ejecute en un dispositivo Android (4.4, estoy probado en nexus 5) y notará que hay un toque blanco por unos pocos milis en cada cambio de pestaña.

Descubrí que esto se debe a que la barra de encabezado de iones se redefine en cada vista. Moví ion-header-bar a mi plantilla de diseño principal y ya no veo el parpadeo. Creo que el proyecto generado por defecto coloca la barra de encabezado en cada vista, por lo que también lo ve allí.

el 'ion-header-bar's se genera automáticamente para mí, ¿dónde (y cómo) lo usa manualmente?

Entonces, @GentryRiggen, ¿te refieres a la barra de navegación de iones?

@mhartington Estoy usando el menú del lado de iones con pestañas de iones dentro del contenido del menú del lado de iones.

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

No use la barra de encabezado de iones para eso, use la barra de navegación de iones.

@mhartington Estoy usando la 'barra de navegación de iones' y la pantalla parpadea (mientras me muevo entre pestañas) ...
entonces, ¿cómo sugieres arreglarlo?

las pestañas simples "starter" de ionic construido para android muestran el flash entre la navegación y que creo que usa ion-nav-bar.

Hmm, no lo veo en mis pruebas.

https://youtu.be/_ja8a08iSPE

Puedes verlo en el video .. Es el destello de la pantalla blanca cuando cambias de pestaña .. Aparece por solo unos milisegundos ... Si quieres ver que más claramente cambia el color de fondo a rojo, azul o cualquier color oscuro.

¿Estás hablando de la barra de navegación que se desvanece?

Él está hablando de la pantalla blanca (perímetro de contenido de iones) que aparece brevemente cuando cambias de pestaña.
Puede verlo claramente en su video cuando cambie la primera vez de "Estado" a "Chats". Pero en realidad aparece todo el tiempo.

@mhartington Adjunté un video de mi aplicación (cámara lenta), puedes verlo claramente adjunto allí.
Me gustaría tomar una acción y ayudarlos a resolver ese problema, pero necesito al menos un punto de partida de ustedes ... ¿por dónde debo empezar?

enlace de youtube: https://youtu.be/TTuNPlL6Fmg

Gracias.

He mirado el código y para mí el error está en la función tabSelected (directiva ionTab)
Parece ocultar la pestaña anterior antes de mostrar la nueva.

Este truco sucio que he hecho parece funcionar. Pero me encantaría ver una solución adecuada.
Simplemente agregue un tiempo de espera alrededor de $ ionicViewSwitcher.viewEleIsActive (childElement, false);

Línea 55025 de ionic.bundle.js

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

Esto me está pasando con:

• Iónico, v1.0.1
• Córdoba 5.3.3

Estoy usando Android 5.1.1 en un Nexus 4.

Para reproducirlo, simplemente hago una aplicación de inicio de "pestañas", cambio el color de la barra de navegación a azul (por ejemplo, cambiando -estable a -positivo) y el parpadeo se vuelve obvio. En realidad, parpadea con la barra de navegación blanca, pero no se puede ver el parpadeo blanco sobre blanco.

Intenté agregar estilos para forzar el tiempo de transición a 0ms en Android y verifiqué que la aplicación ha aplicado estos estilos a cualquier elemento de encabezado al verificar con un inspector de Chrome adjunto e inspeccionar los valores de CSS calculados. Verifiqué dos veces eliminando los estilos y verificando que pasaron de 0ms a algún otro número (0.2ms o 0.5ms, y en realidad tan rápido como el efecto de parpadeo).

Intenté hacer la corrección de @didbarbosa, pero Chrome en el navegador y la aplicación del teléfono se quejaron de que $ timeout no estaba definido. Cuando registré el valor de $ timeout, de hecho no estaba definido.

@ lloy0076 necesitas inyectarlo en la directiva

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

@didbarbosa - De hecho, acabo de notar que mi versión de Ionic no es la última versión; así cambié mi "bower.json" para leer:

{
"nombre": "HelloIonic",
"privado": "verdadero",
"devDependencies": {
"ionic": "driftyco / ionic-bower # ~ 1",
"platform.js": "plataforma # ~ 1.3.0"

... y creería que no hay parpadeo incluso sin la solución $ timeout ...

Tal vez si intentaras lo mismo con la solución de transición CSS, podría "arreglarse" solo, aunque odio los problemas que mágicamente se arreglan así.

Sí, parece desaparecer con el lanzamiento nocturno.
Buenas noticias :)

En realidad, para mí no está arreglado.

no arreglado para mí 2: \

¿Alguna noticia sobre este tema?

También tengo este problema en iOS.

@harryzun con respecto a iOS, consulte https://github.com/driftyco/ionic/issues/4395

En iOS no es el mismo problema

También comencé a notar esto en Android en algún momento después de actualizar a la v1.1. Sin embargo, no estoy seguro de cuándo comenzó.

comenzó alrededor de v1

Si alguien tiene una solución (temporal), me encantaría escucharla.

Soy el mismo error ... ¿Alguien tiene más información? :pulpo:

Probablemente no esté relacionado, pero tuve un problema similar anteriormente y, por alguna extraña razón, eliminar cache: false de mi definición de estado para el estado de la pestaña del hermano infractor resolvió el problema. No tengo ni idea de por qué, ya que estamos usando este mismo patrón, con la misma combinación de controlador + plantilla, en otros 3 lugares de nuestra configuración de pestañas sin ningún problema.

actualizar

Así que pasé un poco de tiempo tratando de llegar al fondo del problema que vimos, un poco interesante y un poco de ingenuidad de mi parte llevó al parpadeo en negro antes de stateChangeSuccess.

Entonces, como se mencionó anteriormente, usamos el mismo patrón en toda nuestra aplicación, pero con una diferencia clave: este estado en realidad tenía una resolución respaldada por API en su definición de estado para sortear una deficiencia que actualmente tenemos en nuestro back-end que no teníamos. deben tenerse en cuenta con los otros estados x3 que utilizan este patrón.

El estado "chat" era hermano del estado principal de la pestaña. Para llegar a este estado, simplemente haga clic en un miembro en la vista principal y terminará en el estado de chat de hermanos. Al navegar en él desde el hermano, no se observó ningún destello negro, el estado principal sería visible hasta que finalice la resolución y luego finalizaría la navegación normal. Al navegar de regreso a la pestaña (desde otra pestaña) con la vista de chat como el estado actual en el historial, ui-router + ionic ejecutaría el cambio a la nueva pestaña inmediatamente, pero la pantalla negra estaría visible hasta que se haya completado la resolución .

Esto también tiene sentido en cuanto a por qué eliminar cache: false y establecer el

Tiene perfecto sentido cuando lo piensas, supongo. Con suerte, esto podría ahorrarle a alguien un dolor de cabeza si se topa con esto a través de Google (de la misma manera que yo lo hice).

Rastreé esto hasta esta línea:
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) {

Es la causa del parpadeo de un fotograma cuando se cambian las pestañas, porque la nueva pestaña no se configura como visible hasta 16 ms después.

No estoy seguro de cuál es el punto de esa línea cuando hay pestañas involucradas, pero si reemplaza la llamada $timeout con una llamada de método simple de onReflow() , el rendimiento percibido mejora enormemente y hay no más parpadeo. Ni siquiera en la barra de navegación.

@mhartington ¿ alguna idea al respecto? Quizás debería ser configurable como mínimo.

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

Editar: una mejor solución parece ser simplemente cambiar la condición if a:

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

Edit2: una solución aún mejor que elimina los posibles efectos secundarios es reemplazar la llamada $timeout con:
ionic.requestAnimationFrame(onReflow);
Enviaré un PR con él.

RP abierto https://github.com/driftyco/ionic/pull/4654

¡Muy bien hecho!
Me soluciona el problema.

Muchas gracias amigo.

No funcionó para mí ... He actualizado mi archivo ionic-angular.js pero no veo ningún cambio incluso si estoy aumentando el valor de tiempo de espera inicial. ¿Me estoy perdiendo de algo?
Para el parpadeo de la barra de navegación, utilicé esta solución https://forum.ionicframework.com/t/flickering-when-navigating-via-tabs-on-android/27281 pero ahora el contenido está parpadeando.

Finalmente está funcionando, pero todavía parpadea una vez la primera vez para cada pestaña, ¿alguna idea de por qué?

¿Existe algún plan de lanzamiento sobre este tema? 1.2 o 1.3?

Está incluido en la versión 1.2 reciente.

+1, ¿hay otras soluciones?

wow, esto todavía está sucediendo, eh ... ¿Estaba pensando que el equipo central tendría una buena idea de lo que era? ¿Alguien tiene un buen indicador del código fuente con el que podríamos empezar a experimentar?

¿1.2 solucionó esto? Había un compromiso allí que debería haber abordado este problema.

El error todavía está aquí en 1.2 a 1.2.2

Intenté de nuevo y se soluciona si pones:

ionic.requestAnimationFrame(onReflow);  

como él dijo, y no:

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

Obviamente, $ timeout está haciendo algo

@mlynch, ¿ quizás recuerdas para qué fue esto? https://github.com/driftyco/ionic/commit/d0246cf975bb4022eb890d3b0c28964e3065644c#diff -e25bdd32bda2f4f00f01c823ec86b1f3

Parece haberlo roto de nuevo.

Quizás por eso:

si el código se pone en cola usando $ timeout, debería ejecutarse después de que el DOM haya sido manipulado por Angular, y después de que el navegador se renderice (lo que puede causar parpadeo en algunos casos)

Revisando para 1.2.5

Desafortunadamente, esto rompió # 4782 lo que causó que la vista posterior a veces no se animara correctamente. Eliminar $timeout probablemente sea una solución demasiado simplista para esto.

todavía tengo el problema incluso cuando elimino el tiempo de espera ...

+1

También tengo estos problemas ...

+1

+1

tenga en cuenta que actualizar su bower.json ayuda (resaltado correcto), pero hay un ligero retraso como se mencionó

{
"nombre": "HelloIonic",
"privado": "verdadero",
"devDependencies": {
"ionic": "driftyco / ionic-bower # 1.7.12", // AQUÍ, ASEGÚRESE DE QUE ESTÉ ACTUALIZADO
"aws-sdk-js": "~ 2.0.9",
"bootstrap": "~ 3.2.0",
"platform.js": "plataforma # ~ 1.3.1"
}
}

De todos modos, el ligero destello es solo en Android, y es solo una fracción de segundo.

¿Alguien puede confirmar que 1.2.3 "copenhagen" soluciona este problema?

@mhartington @mlynch Puedo confirmar que esta propiedad todavía no funciona con la versión 1.2.3. Eche un vistazo a esta secuencia de capturas de pantalla.

Primero estoy comenzando en mi pestaña Facturas así:

Luego toco en la pestaña Compañeros de habitación y se producen los siguientes pasos (lo que provoca el parpadeo):

1. La aplicación dice "Facturas" para el título, pero muestra la pestaña "Compañeros de cuarto" almacenada en caché
   
2. Luego, la aplicación elimina todo el contenido, pero aún muestra el título "Facturas"
   
3. La aplicación muestra contenido de "Compañeros de habitación"
   
4. La aplicación se desvanece en el título "Compañeros de habitación"
   

Con todos estos pasos combinados, se crea un parpadeo espantoso al cambiar de pestaña.

Para ver el error en vigencia, eche un vistazo a este video:
https://dl.dropboxusercontent.com/u/97539058/Bugs/tabs-bug.mp4

Oye, me di cuenta de que mi error era un problema con el uso de SQLite en mi aplicación. Perdón por la confusion.

+1

+1

+1

Parece un problema con el tiempo de espera

¡El problema simplemente desapareció para mí! ¡El problema estaba relacionado con la forma en que había creado mis pestañas!
asegúrese de construirlo de la manera correcta, la navegación dentro de las pestañas también. cuidar de los controladores padres ==> niño

no más destellos blancos

@princefr, ¿ podría

Para iOS, tuve que reemplazar css [ionic.CSS.TRANSITION_DURATION] con css.WebkitTransition en ionic.bundle.js línea 47715 y 47750

`// Transiciones de iOS
// -----------------------
provider.transitions.views.ios = function (entrarEle, salirEle, dirección, 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 (enterHeaderBar, dejandoHeaderBar, 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;

}; `

Parece que se solucionó para mí cuando cambié esta línea https://github.com/driftyco/ionic/blob/master/js/angular/service/viewSwitcher.js#L142 para ser:

callback && ionic.requestAnimationFrame(callback);

Sin embargo, no estoy seguro de si es una forma correcta de solucionar este problema.

¿Esto también ocurre en algunas versiones de iOS (recordando que el informe es sobre versiones de Android)?

De: Abdul Wahab [mailto: [email protected]]
Enviado: miércoles 10 de febrero de 2016 a las 21:59
Para: driftyco / ionic [email protected]
Cc: David Lloyd [email protected]
Asunto: Re: error [iónico]: aparece un flash blanco al cambiar entre pestañas en Android (n. ° 3907)

Para iOS, tuve que reemplazar css [ionic.CSS.TRANSITION_DURATION] con css.WebkitTransition en ionic.bundle.js línea 47715 y 47750

`// Transiciones de iOS
// -----------------------
provider.transitions.views.ios = function (entrarEle, salirEle, dirección, shouldAnimate) {

function setStyles (ele, opacity, x, boxShadowOpacity) {
var css = {};
css.WebkitTransition = d.shouldAnimate? '': 0;
css.opacity = opacidad;
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 = {
ejecutar: función (paso) {
if (dirección == 'adelante') {
setStyles (entrandoEle, 1, (1 - paso) * 99, 1 - paso); // a partir del 98% evita un parpadeo
setStyles (dejandoEle, (1 - 0.1 * paso), paso * -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 && (dirección == 'adelante' || dirección == 'atrás')
};

return d;

};

provider.transitions.navBar.ios = function (enterHeaderBar, dejandoHeaderBar, direction, shouldAnimate) {

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

ctrl.setCss ('botones-izquierda', css);
ctrl.setCss ('botones-derecha', css);
ctrl.setCss ('botón de retroceso', css);

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

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

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

función dejar (ctrlA, ctrlB, paso) {
if (! ctrlA ||! ctrlB) return;
var titleX = (- (ctrlA.titleTextX () - ctrlB.backButtonTextLeft ()) - (ctrlA.titleLeftRight ())) * paso;
setStyles (ctrlA, 1 - paso, titleX, 0);
}

var d = {
ejecutar: función (paso) {
var enterHeaderCtrl = enterHeaderBar.controller ();
var dejandoHeaderCtrl = dejandoHeaderBar && dejandoHeaderBar.controller ();
if (d.direction == 'back') {
dejar (entrandoHeaderCtrl, dejandoHeaderCtrl, 1 - paso);
enter (dejandoHeaderCtrl, entrandoHeaderCtrl, 1 - paso);
} demás {
enter (enterHeaderCtrl, dejandoHeaderCtrl, paso);
dejar (dejandoHeaderCtrl, entrandoHeaderCtrl, paso);
}
},
dirección: dirección,
shouldAnimate: shouldAnimate && (dirección == 'adelante' || dirección == 'atrás')
};

return d;

}; `

-
Responda a este correo electrónico directamente o véalo en GitHub https://github.com/driftyco/ionic/issues/3907#issuecomment -182324500. https://github.com/notifications/beacon/ABHsBD1Sp3tXsq8707UTfdVHgqSlxI0zks5pixaSgaJpZM4E82pl.gif

+1
parpadea en android ..

1+

+1

chicos simplemente " caché: verdadero " en su " estado " para que su página se almacene en caché antes de extraer y renderizar sin problemas

@ Harish-here ¿Qué pasa con la primera vez?

Sí, realmente no es una buena idea usar la caché: es cierto solo para estos fines

@ Harish-aquí. . Tengo una aplicación que usa el mismo estado para diferentes páginas. Es decir, es una vista detallada que toma algunos parámetros de $ state. Dado que es la misma vista con contenido diferente, no puedo usar caché: falso :)
Y tampoco parece ser una buena idea para este problema en particular

Sigue siendo el mismo problema aquí ejecutando 1.2.4-nightly-1917

+1

@princefr : sí, explique cuál sería el marcado adecuado para las pestañas para aliviar este problema

@princefr por favor si puede

Esto sigue siendo un problema para mí y bastante frustrante. ¿Hay algún movimiento o alguna resolución entendida?

+1

+1

¡Mirando esto mañana amigos! :sonrisa:

Hay un problema relacionado con iOS que vincularé aquí esta noche. Pude reproducirlo.

¡Gracias @mhartington!

Para agregar un poco más de contexto, en mi situación encontré que el error estaba presente con lo siguiente:

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>

Pero NO presente cuando eliminé <ANY ELEMENT> de view-1.html.

Entonces, en mi caso, no puedo lograr el efecto deseado de mostrar un estado secundario dentro de un estado principal, sin reemplazar completamente el contenido del estado principal.

Probé TODAS las formas de ui-view / ion-view / ion-nav-view / ion-tabs / ion-pane / etc. Absolutamente nada funcionó.

Este problema describe el mismo error pero en iOS https://github.com/driftyco/ionic/issues/5888

@mhartington, ¿puedes probar con la aplicación de conferencias? @Brandy y

Sin embargo, el error en # 5888 es para ionic2, no estoy seguro de que las bases del código sean lo suficientemente similares como para que sea el mismo error.

Hola a todos, gracias por ser pacientes en este caso, realmente lo agradezco: sonríe:

Entonces, revisando las cosas, esto debería afectar tanto a iOS como a Android con ionic 1.2.4, ¿correcto?

Además, ¿alguien ha podido recrear esto con la aplicación de inicio de pestañas?

@mhartington está ahí en la aplicación de inicio de pestañas, solo debes ser muy atento. Además, arreglé esto en https://github.com/driftyco/ionic/pull/4654 pero aparentemente eso rompió algo más, y luego, cuando se arregló, se rompió nuevamente.

Puede verlo en el video que publicó: https://www.youtube.com/watch?v=_ja8a08iSPE&feature=youtu.be Solo observe cómo, en lugar de que aparezca la nueva pestaña, hay un destello blanco muy breve (1 cuadro, es muy rápido).

@andreialecu está bien, viéndolo también,

https://youtu.be/R5EafRKTst0

Mismo clip, solo que se ralentizó mucho

Mirando las relaciones públicas, voy a ver qué se puede hacer y evitar que se rompan otras cosas: sonríe:

¡Oigan todos! Así que creo que he podido avanzar en esto. Abrí un PR que se ve bien en mis pruebas, pero me encantaría escuchar tus comentarios primero.

Los cambios se han realizado en la rama viewFlicker.

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

Si no le importaría extraer el código, compilar Ionic desde la fuente y probar los cambios en su aplicación, podemos ver si esto soluciona las cosas y eliminar este error: shipit:

Impresionante. ¿Es este un zorro específico de Android o iOS también se verá mejor?

@ctcampbell cajero automático android. En mis pruebas, no pude causar un parpadeo en iOS

Aquí hay un video rápido que muestra las relaciones públicas

https://youtu.be/nWSuocu64FU

+1

@jordantomax, ¿esto significa que las relaciones públicas funcionan bien para usted? :sonrisa:

Vaya, no lo siento. Simplemente suscribiéndome al feed. Aunque puedo probarlo. ¿Necesito compilar algo para poder usarlo? Veo que el lanzamiento no fue tocado por su compromiso.

Ah

Puedes seguir estos pasos.

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

Y debería tener el código compilado en dist/js/ionic.bundle.js
Debería poder copiar / pegar ese código en un proyecto de prueba y probarlo.

Parece estar funcionando bien en la aplicación de pestañas de prueba. Sin embargo, sigo teniendo problemas para flashear en mi aplicación. Estoy usando pestañas y menú, pero las pestañas solo aparecen en determinadas páginas. Quiero tomar un video para mostrarles, ¿cómo hago para hacer eso?

¿En su lugar, podría crear un repositorio de codepen o git mínimo que podría clonar y probar?
Solo una configuración similar de su aplicación

Buena idea. Intentaré hacerlo esta noche o mañana por la mañana. Gracias por tu ayuda.

@mhartington Acabo de probarlo en mi aplicación y el parpadeo parece haber desaparecido. : +1:

Probé la solución usando el iniciador de pestañas en un Nexus 6 con la vista previa de Android N, un Nexus 7 2013 con 6.0.1, un Moto X 2014 con 5.1 y un Nexus 7 2013 con 4.4.4 y no vi ningún parpadeo en cualquiera de esos dispositivos. Impresionante !

@jordantomax, ¿has tenido suerte con ese ejemplo?

@mhartington lo siento, ¡han sido totalmente abrumados! Espero trabajar en ello el domingo.

@mhartington Acabo de probar esto en mi aplicación que estoy construyendo y Android y iPhone parecen estar arreglados con # 5937.

@jordantomax , ¿ha tenido la oportunidad de poner un ejemplo?

Gracias,
Dan

Hola,

Esta solución funciona bien, pero parece que el complemento de transiciones de página nativa no funciona correctamente ... las transiciones están haciendo cosas locas después de que puse esta solución. ¿Crees que está vinculado?

@tgensol Use los parámetros predeterminados para estos complementos, ¡funciona bien con esta solución!

¡Hola a todos! Como parece a través de mis pruebas y ustedes, probando, la solución parece estar funcionando, seguiré adelante y cerraré este problema por ahora. @jordantomax, si tienes la oportunidad de hacer esa prueba juntos, siéntete libre de publicar y con mucho gusto volveré a abrir (:. También @tgensol si la solución anterior no soluciona tu problema, ¿te importaría abrir un problema por separado en la hora del error? ¡Gracias a todos!

Con los cambios decisivos en el repositorio iónico, ¿cómo compilamos y construimos esto?

1.x branch ahora es Ionic 1.3.1 . Si clona el repositorio y comprueba la rama, debería poder ejecutar gulp build para generar los archivos distribuibles. Por favor, avíseme si tiene algún problema con esto.

Gracias,
Dan

Gracias. ya descargué el dist manualmente: D

+1

He arreglado esto. Esto sucede en relación con el comportamiento de la barra iónica de actualización de la vista iónica: se crea una nueva barra antes de ingresar y oculta la barra anterior (actual) y parpadea. La solución es posponer la ocultación de la barra actual para después de ingresar al evento. Por favor escríbeme si tienes alguna pregunta.

@smcreator, ¿ podrías compartir los fragmentos de código?

Sigo teniendo el mismo problema ... cualquier fragmento de código Gracias

Creo que este problema está solucionado en versiones iónicas recientes.

Tuve el mismo problema y la respuesta de @princefr fue la clave. Tenía varias barras de navegación sobre las vistas. Al agregar el ion-nav-bar solo en la parte superior de mi archivo tabs.html , solucioné el 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>

¡Gracias por el problema! Este problema está bloqueado para evitar comentarios que no sean relevantes para el problema original. Si esto sigue siendo un problema con la última versión de Ionic, cree un nuevo problema y asegúrese de que la plantilla esté completa.