Ionic-framework: 버그: Android에서 탭 간에 전환할 때 흰색 플래시가 표시됨

이 문제의 상태에 대해 말씀해 주시겠습니까?

같은 문제가 있습니다. 업데이트가 있습니까?

+1

이 문제가 있는 최소한의 예를 제공하십시오.

새 이온 앱(탭 템플릿)을 만들고 배경을 흰색으로 변경합니다. Android 장치(4.4, nexus 5에서 테스트)에서 빌드하고 실행하면 모든 탭이 변경될 때마다 몇 밀리초 동안 흰색 플릭이 있음을 알 수 있습니다.

나는 이것이 각 보기에서 재정의되는 이온 헤더 막대 때문이라는 것을 발견했습니다. ion-header-bar를 기본 레이아웃 템플릿으로 옮겼고 더 이상 깜박임이 표시되지 않습니다. 기본 생성 프로젝트는 각 보기에 헤더 표시줄을 두므로 거기에서도 볼 수 있다고 생각합니다.

'ion-header-bar's는 자동으로 생성되며, 어디서(및 어떻게) 수동으로 사용합니까?

@GentryRiggen 은 이온 탐색 막대를 의미합니까?

@mhartington 이온 사이드 메뉴 콘텐츠 내부에 이온 탭이 있는 이온 사이드 메뉴를 사용하고 있습니다.

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

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

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

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

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

</ion-side-menus>

이를 위해 ion-header-bar를 사용하지 말고 ion-nav-bar를 사용하십시오.

@mhartington 'ion-nav-bar' 사용
그래서 당신은 그것을 고칠 것을 제안합니까?

Android용으로 제작된 ionic의 간단한 탭 "스타터"는 탐색 사이의 플래시를 보여주고 ion-nav-bar를 사용한다고 생각합니다.

흠, 내 테스트에서 그것을 볼 수 없습니다.

https://youtu.be/_ja8a08iSPE

동영상에서 보실 수 있습니다.. 탭을 바꾸면 흰색 화면이 깜박입니다.. 몇 밀리초 동안만 나타납니다... 배경색을 빨강, 파랑 또는 어두운 색으로 더 명확하게 변경하고 싶다면 .

사라지는 탐색 모음에 대해 이야기하고 있습니까?

그는 탭을 전환할 때 잠깐 나타나는 흰색 화면(이온 함량 경계)에 대해 이야기하고 있습니다.
"상태"에서 "채팅"으로 처음 전환할 때 비디오에서 명확하게 볼 수 있습니다. 그러나 실제로 매번 나타납니다.

@mhartington 내 앱(슬로우 모션)에 동영상을 첨부했습니다.
조치를 취하고 그 문제를 해결하는 데 도움을 주고 싶지만 적어도 시작점이 필요합니다. 어디서부터 시작해야 합니까?

유튜브 링크 : https://youtu.be/TTuNPlL6Fmg

감사 해요.

코드를 보니 tabSelected 함수(ionTab 지시문)에 오류가 있습니다.
새 탭을 표시하기 전에 이전 탭을 숨기는 것 같습니다.

내가 만든 이 더러운 해킹은 효과가 있는 것 같습니다. 하지만 적절한 수정을 보고 싶습니다.
$ionicViewSwitcher.viewEleIsActive(childElement, false);

ionic.bundle.js의 55025행

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

이것은 나에게 일어나고 있습니다.

• 아이오닉, v1.0.1
• 코르도바 5.3.3

Nexus 4에서 Android 5.1.1을 실행하고 있습니다.

그것을 재현하려면 "탭" 스타터 앱을 만들고 탐색 모음의 색상을 파란색으로 변경하면(예: -stable을 -positive로 변경) 깜박임이 분명해집니다. 실제로 흰색 탐색 표시줄과 함께 깜박이지만 흰색 깜박임에 흰색을 볼 수 없습니다.

Android에서 전환 시간을 0ms로 강제 적용하는 스타일을 추가하려고 시도했으며 첨부된 크롬 검사기로 확인하고 계산된 CSS 값을 검사하여 앱이 이러한 스타일을 모든 헤더 항목에 적용했는지 확인했습니다. 스타일을 제거하고 0ms에서 다른 숫자(0.2ms 또는 0.5ms - 실제로 깜박임 효과만큼 빠름)로 이동했는지 확인하여 두 번 확인했습니다.

@didbarbosa 수정을 시도했지만 브라우저의 Chrome과 전화 앱 모두 $timeout이 정의되지 않았다고 불평했습니다. $timeout 값을 기록했을 때 실제로 정의되지 않았습니다.

@ lloy0076 지시문에 주입해야 합니다.

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

@didbarbosa - 사실 내 버전의 Ionic이 최신 릴리스가 아님을 알았습니다. 따라서 "bower.json"을 다음과 같이 변경했습니다.

{
"이름": "HelloIonic",
"비공개": "참",
"devDependencies": {
"ionic": "driftyco/ionic-bower#~1",
"platform.js": "플랫폼#~1.3.0"

... 그리고 $timeout 솔루션이 없어도 깜박임이 없다는 것을 믿으시겠습니까?

CSS 전환 솔루션으로 동일하게 시도했다면 자체적으로 "고칠" 수도 있습니다. 하지만 저는 마술처럼 스스로를 수정하는 문제를 싫어합니다.

예, 야간 릴리스와 함께 사라진 것 같습니다.
좋은 소식 :)

사실 그것은 나를 위해 고정되지 않습니다.

나를 위해 고정되지 않았습니다 2 :\

이 문제에 대한 소식이 있습니까?

iOS에서도이 문제가 있습니다.

iOS에 관한 @harryzun 은 https://github.com/driftyco/ionic/issues/4395 를 참조

iOS에서는 동일한 문제가 아닙니다.

v1.1로 업그레이드한 후 언젠가 Android에서도 이것을 알아차리기 시작했습니다. 언제 시작되었는지 확실하지 않습니다.

그것은 v1 주위에 시작되었습니다

누군가 (임시) 수정 사항이 있으면 듣고 싶습니다.

나는 같은 버그입니다 ... 누구 더 많은 정보가 있습니까 ?? :문어:

아마도 관련이 없지만 이전에 비슷한 문제가 있었고 문제가 되는 형제 탭 상태에 대한 상태 정의에서 cache: false 를 삭제하면 몇 가지 기괴한 이유로 문제가 해결되었습니다. 나는 우리가 탭 설정의 다른 3곳에서 문제 없이 동일한 컨트롤러+템플릿 콤보로 동일한 패턴을 사용하고 있기 때문에 왜 그런지 전혀 모릅니다.

업데이트

그래서 우리가 본 문제의 맨 아래로 내려가는 데 약간의 시간을 할애했습니다. 다소 흥미롭고 약간 순진한 부분이 stateChangeSuccess 이전에 검은색 깜박임으로 이어집니다.

따라서 위에서 언급한 바와 같이 우리는 애플리케이션 전체에서 동일한 패턴을 사용하지만 한 가지 중요한 차이점이 있습니다. 이 상태는 실제로 상태 정의에 API 지원 확인을 사용하여 현재 우리가 갖지 못한 백엔드의 단점을 해결했습니다. 이 패턴을 사용하는 다른 x3 상태와 함께 설명되어야 합니다.

"채팅" 상태는 탭에 대한 기본 상태의 형제였습니다. 이 상태에 도달하려면 기본 보기에서 회원을 클릭하기만 하면 됩니다. 그러면 형제 채팅 상태가 됩니다. 형제에서 탐색할 때 검은색 깜박임이 관찰되지 않았으며 해결이 완료될 때까지 기본 상태가 표시되고 일반 탐색이 완료됩니다. 채팅 보기가 기록의 현재 상태인 탭(다른 탭에서)으로 다시 이동할 때 ui-router + ionic은 즉시 새 탭으로 스왑을 실행하지만 해결이 완료될 때까지 검은색 화면이 표시됩니다. .

이것은 cache: false 제거하고 기본값을 true로 설정하면 문제가 해결된 이유에 대해서도 의미가 있습니다.

당신이 그것에 대해 생각할 때 완벽한 의미가 있습니다. 바라건대 이것은 누군가가 Google을 통해 이것을 우연히 발견하면 두통을 구할 수 있을 것입니다(나와 같은 방식으로).

나는 이것을 다음 줄까지 추적했습니다.
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) {

새 탭이 16ms 후에 표시되도록 설정되어 있지 않기 때문에 탭이 전환될 때 한 프레임이 깜박이는 원인입니다.

탭이 관련되어 있을 때 그 줄의 요점이 무엇인지 잘 모르겠지만 $timeout 호출을 onReflow() 의 간단한 메서드 호출로 바꾸면 인지된 성능이 크게 향상되고 더 이상 깜박임이 없습니다. 네비게이션 바에도 없습니다.

@mhartington 이것에 대해 어떤 생각이 있습니까? 아마도 최소한 구성 가능해야 합니다.

@adamdbradley의 https://github.com/driftyco/ionic/commit/8ebde73d0b8afac1bf1c1787c90a72a28a88bc3a에 의해 소개된 것 같습니다.

편집: 더 나은 수정은 if 조건을 다음과 같이 변경하는 것 같습니다.

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

Edit2: 잠재적인 부작용을 제거하는 더 나은 수정은 $timeout 호출을 다음으로 바꾸는 것입니다.
ionic.requestAnimationFrame(onReflow);
함께 PR을 보내드립니다.

PR 오픈 https://github.com/driftyco/ionic/pull/4654

아주 잘했어!
나에게 문제를 해결합니다.

고마워 친구.

작동하지 않았습니다... ionic-angular.js 파일을 업데이트했지만 초기 시간 초과 값을 늘려도 변경 사항이 표시되지 않습니다. 내가 뭔가를 놓치고 있습니까?
탐색 표시줄 깜박임의 경우 이 수정 사항을 https://forum.ionicframework.com/t/flickering-when-navigating-via-tabs-on-android/27281 사용 했지만 이제 내용이 깜박입니다.

마지막으로 작동하지만 각 탭에 대해 처음으로 한 번 깜박입니다. 이유를 알 수 있습니까?

이 문제에 대한 출시 계획이 있습니까? 1.2 또는 1.3?

최근 1.2 릴리스에 포함되어 있습니다.

+1, 다른 솔루션이 있습니까?

와우 이건 아직 진행 중입니다.어..핵심 팀이 이것이 무엇인지 잘 알고 있다고 생각했습니까? 우리가 실험을 시작할 수 있는 소스 코드에 대한 좋은 포인터가 있는 사람이 있습니까?

1.2에서 이 문제가 해결되었습니까? 이 문제를 해결해야 하는 커밋이 있었습니다.

버그는 여전히 1.2에서 1.2.2에 있습니다.

나는 다시 시도했고 다음을 넣으면 해결됩니다.

ionic.requestAnimationFrame(onReflow);  

그가 말했듯이, 그리고 아닙니다 :

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

분명히 $timeout은 뭔가를 하고 있습니다.

@mlynch 아마도 이것이 무엇을 위한 것인지 기억하십니까? https://github.com/driftyco/ionic/commit/d0246cf975bb4022eb890d3b0c28964e3065644c#diff -e25bdd32bda2f4f00f01c823ec86b1f3

또 깨신듯 합니다.

아마도 이것이 이유일 것입니다.

코드가 $timeout을 사용하여 대기열에 있는 경우 DOM이 Angular에 의해 조작된 후와 브라우저가 렌더링된 후(경우에 따라 깜박임이 발생할 수 있음) 실행되어야 합니다.

1.2.5 검토

불행히도 이것은 #4782를 깨뜨렸고 이로 인해 때때로 뒷모습이 제대로 움직이지 않았습니다. $timeout 제거하는 것은 이에 대한 솔루션이 너무 단순할 수 있습니다.

시간 초과를 제거해도 여전히 문제가 있습니다.

+1

이런 문제도...

+1

+1

참고, bower.json 업데이트는 도움이 되지만(올바른 강조 표시) 언급된 대로 약간의 지연이 있습니다.

{
"이름": "HelloIonic",
"비공개": "참",
"devDependencies": {
"ionic": "driftyco/ionic-bower#1.7.12", //여기, 업데이트되었는지 확인
"aws-sdk-js": "~2.0.9",
"부트스트랩": "~3.2.0",
"platform.js": "플랫폼#~1.3.1"
}
}

어쨌든 약간의 플래시는 Android에서만 발생하며 1초 미만입니다.

누구든지 1.2.3 "copenhagen" 이 이 문제를 해결하는지 확인할 수 있습니까?

@mhartington @mlynch 버전 1.2.3에서는 여전히 작동하지 않는 속성임을 확인할 수 있습니다. 이 일련의 스크린샷을 살펴보십시오.

저는 먼저 Bills 탭에서 다음과 같이 시작합니다.

그런 다음 룸메이트 탭을 탭하면 다음 단계가 수행됩니다(깜박임).

1. 앱에 제목이 "청구서"라고 표시되지만 캐시된 "룸메이트" 탭이 표시됨
   
2. 그런 다음 앱은 모든 콘텐츠를 제거하지만 여전히 "청구서" 제목을 표시합니다.
   
3. 앱에 "룸메이트" 콘텐츠가 표시됨
   
4. 앱이 "Roommates" 제목에서 사라짐
   

이 모든 단계를 결합하면 탭을 전환할 때 무시무시한 깜박임이 생성됩니다.

영향을 받는 버그를 보려면 다음 비디오를 보십시오.
https://dl.dropboxusercontent.com/u/97539058/Bugs/tabs-bug.mp4

이봐, 내 버그가 내 응용 프로그램에서 SQLite를 사용하는 것과 관련된 문제라는 것을 깨달았습니다. 혼란을 드려 죄송합니다.

+1

+1

+1

타임아웃 문제인듯

문제는 나를 위해 사라졌습니다! 이 문제는 탭을 구축한 방식과 관련이 있습니다!
탭 내부 탐색도 좋은 방법으로 빌드했는지 확인하십시오. 컨트롤러를 돌봐주세요 부모 ==> 자식

더 이상 흰색 플래시가 없습니다

@princefr 자세히

iOS의 경우 ionic.bundle.js 라인 47715 및 47750에서 css[ionic.CSS.TRANSITION_DURATION]을 css.WebkitTransition으로 바꿔야 했습니다.

`// iOS 전환
// -----------------------
provider.transitions.views.ios = function(enteringEle, LeaveEle, 방향, 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, LeaveHeaderBar, 방향, shouldAnimate) {

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

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

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

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

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

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

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

return d;

};`

이 라인을 https://github.com/driftyco/ionic/blob/master/js/angular/service/viewSwitcher.js#L142 로 변경했을 때 수정된 것 같습니다.

callback && ionic.requestAnimationFrame(callback);

이 문제를 해결하는 올바른 방법인지 확실하지 않습니다.

이것은 iOS의 일부 릴리스에서도 발생합니까(보고서가 Android 릴리스에 있음을 기억)?

보낸 사람: Abdul Wahab [mailto:[email protected]]
보낸 날짜: 2016년 2월 10일 수요일 오후 9시 59분
받는 사람:driftyco/ionic [email protected]
참조: David Lloyd [email protected]
제목: Re: [ionic] 버그: Android에서 탭 간에 전환할 때 흰색 플래시가 표시됨(#3907)

iOS의 경우 ionic.bundle.js 라인 47715 및 47750에서 css[ionic.CSS.TRANSITION_DURATION]을 css.WebkitTransition으로 바꿔야 했습니다.

`// iOS 전환
// -----------------------
provider.transitions.views.ios = function(enteringEle, LeaveEle, 방향, shouldAnimate) {

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

var d = {
실행: 함수(단계) {
if (방향 == '앞으로') {
setStyles(enteringEle, 1, (1 - 단계) * 99, 1 - 단계); // 98%에서 시작하여 깜박임을 방지합니다.
setStyles(leavingEle, (1 - 0.1 * 단계), 단계 * -33, -1);

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

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

},
shouldAnimate: shouldAnimate && (방향 == '앞으로' || 방향 == '뒤로')
};

리턴 d;

};

provider.transitions.navBar.ios = function(EnteringHeaderBar, LeaveHeaderBar, 방향, shouldAnimate) {

함수 setStyles(ctrl, 불투명도, titleX, backTextX) {
var CSS = {};
css.WebkitTransition = d.shouldAnimate? '' : '0ms';
css.opacity = 불투명도 === 1 ? '' : 불투명도;

ctrl.setCss('왼쪽 버튼', CSS);
ctrl.setCss('오른쪽 버튼', CSS);
ctrl.setCss('뒤로 버튼', CSS);

css[ionic.CSS.TRANSFORM] = 'translate3d(' + backTextX + 'px,0,0)';
ctrl.setCss('뒤로 텍스트', CSS);

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

함수 입력(ctrlA, ctrlB, 단계) {
if (!ctrlA || !ctrlB) 리턴;
var titleX = (ctrlA.titleTextX() + ctrlA.titleWidth()) * (1 - 단계);
var backTextX = (ctrlB && (ctrlB.titleTextX() - ctrlA.backButtonTextLeft()) * (1 - 단계)) || 0;
setStyles(ctrlA, 단계, titleX, backTextX);
}

함수 떠나기(ctrlA, ctrlB, 단계) {
if (!ctrlA || !ctrlB) 리턴;
var titleX = (-(ctrlA.titleTextX() - ctrlB.backButtonTextLeft()) - (ctrlA.titleLeftRight())) * 단계;
setStyles(ctrlA, 1 - 단계, 제목X, 0);
}

var d = {
실행: 함수(단계) {
var enterHeaderCtrl = enterHeaderBar.controller();
var 떠나는 헤더Ctrl = 떠나는 헤더바 && 떠나는 헤더바.컨트롤러();
if (d.direction == '뒤로') {
떠나기(EnteringHeaderCtrl, LeaveHeaderCtrl, 1 - 단계);
enter(leavingHeaderCtrl, enterHeaderCtrl, 1 - 단계);
} 또 다른 {
엔터(헤더Ctrl 입력, 헤더Ctrl 떠나기, 단계);
떠나기(leavingHeaderCtrl, enterHeaderCtrl, 단계);
}
},
방향: 방향,
shouldAnimate: shouldAnimate && (방향 == '앞으로' || 방향 == '뒤로')
};

리턴 d;

};`

—
이 이메일에 직접 답장하거나 GitHub https://github.com/driftyco/ionic/issues/3907#issuecomment -182324500 에서 https://github.com/notifications/beacon/ABHsBD1Sp3tXsq8707UTfdVHgqSlxI0zks5pixaSgaJpZM4E82pl.gif

+1
안드로이드에서 깜박..

1+

+1

추출 및 렌더링이 원활하게 진행되기 전에 페이지가 캐시되도록 " 상태 "에서 " 캐시 : true "

@Harish-here 처음 해보는 건 어때?

예, 캐시를 사용하는 것은 정말 좋은 생각이 아닙니다. 이러한 목적을 위해서만 true입니다.

@Harish-여기 . . 다른 페이지에 대해 동일한 상태를 사용하는 앱이 있습니다. 즉, $state 매개변수를 사용하는 세부 정보 보기입니다. 내용이 다른 동일한 보기이므로 cache:false를 사용할 수 없습니다. :)
그리고 이 특정 문제에 대해서도 좋은 생각이 아닌 것 같습니다.

1.2.4-nightly-1917을 실행하는 동일한 문제

+1

@princefr - 예, 이 문제를 완화하기 위해 탭에 적절한 마크업이 무엇인지 자세히

@princefr 탭 구조에 대해 자세히

이것은 여전히 ​​나에게 문제이며 매우 실망 스럽습니다. 어떤 움직임이나 이해된 해결책이 있습니까?

+1

+1

내일은 이것부터 살펴보세요 여러분! :이를 드러내고 웃다:

오늘 밤 늦게 여기에 링크할 iOS 관련 문제가 있습니다. 재현할 수 있었습니다.

@mhartington 감사합니다!

컨텍스트를 더 추가하기 위해 제 상황에서 다음과 같은 버그가 있음을 발견했습니다.

색인.html
<ion-nav-view></ion-nav-view>

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

하위 보기-1.html
<ANY></ANY>

그러나 view-1.html에서 <ANY ELEMENT> 를 제거했을 때 존재하지 않습니다.

따라서 제 경우에는 부모 상태 콘텐츠를 완전히 교체하지 않고는 부모 상태 내부에 자식 상태를 표시하는 원하는 효과를 얻을 수 없습니다.

나는 ui-view/ion-view/ion-nav-view/ion-tabs/ion-pane/etc의 모든 방식을 시도했습니다. 전혀 효과가 없었습니다.

이 문제는 동일한 버그를 설명하지만 iOS에서는 https://github.com/driftyco/ionic/issues/5888입니다.

@mhartington 회의 앱으로 테스트할 수 있나요? 나와 @brandy 는 탭을 전환할 때 약간의 플래시를 재현할 수 있었습니다. 이것은 실제 장치가 아닌 에뮬레이터를 사용하고 있었습니다.

#5888의 버그는 ionic2에 대한 것이지만 코드 기반이 동일한 버그가 될 만큼 충분히 유사하다고 확신할 수 없습니다.

헤이 yall, 인내심을 가져 주셔서 감사합니다. 정말 감사합니다 :스마일:

따라서 사물을 살펴보면 ionic 1.2.4에서 iOS와 Android 모두에 영향을 주어야 합니다. 맞습니까?

또한 탭 스타터 앱으로 이것을 재현할 수 있는 사람이 있습니까?

@mhartington 탭 스타터 앱에 있습니다. 아주 주의 깊게 관찰하기만 하면 됩니다. 또한 https://github.com/driftyco/ionic/pull/4654 에서 이 문제를 수정했지만 분명히 다른 문제가 발생했으며 문제가 해결되면 다시 문제가 발생했습니다.

게시한 동영상에서 확인할 수 있습니다. https://www.youtube.com/watch?v=_ja8a08iSPE&feature=youtu.be 새 탭이 표시되는 대신 매우 짧은 흰색 플래시(1프레임, 매우 빠름).

@andreialecu 좋아, 그것도 보고,

https://youtu.be/R5EafRKTst0

같은 클립, 속도가 많이 느려졌습니다.

PR을 보면서 무엇을 할 수 있는지 알아보고 다른 일을 방해하지 않도록 합니다.

모두 안녕! 그래서 이 부분에서 어느 정도 성공할 수 있었던 것 같아요. 내 테스트에서 좋아 보이는 PR을 열었지만 먼저 귀하의 피드백을 듣고 싶습니다.

viewFlicker 분기가 변경되었습니다.

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

코드를 풀고, 소스에서 Ionic을 빌드하고, 앱의 변경 사항을 테스트하는 데 신경 쓰지 않는다면 문제가 해결되고 이 버그를 제거할 수 있는지 확인할 수 있습니다.shipit:

엄청난. 이것은 안드로이드 전용 여우입니까, 아니면 iOS도 더 좋아 보일 것입니까?

@ctcampbell 안드로이드 ATM. 내 테스트에서 iOS에서 깜박임을 유발할 수 없었습니다.

다음은 PR 시연 동영상입니다.

https://youtu.be/nWSuocu64FU

+1

@jordantomax 이것은 PR이 잘 작동한다는 것을 의미합니까? :이를 드러내고 웃다:

죄송합니다. 피드를 구독하기만 하면 됩니다. 그래도 테스트할 수 있습니다. 사용하기 위해 무언가를 컴파일해야 합니까? 커밋이 릴리스에 영향을 미치지 않았음을 알 수 있습니다.

아아

다음 단계를 수행할 수 있습니다.

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

그리고 dist/js/ionic.bundle.js 컴파일된 코드가 있어야 합니다.
해당 코드를 테스트 프로젝트에 복사/붙여넣기하고 사용해 볼 수 있어야 합니다.

테스트 탭 응용 프로그램에서 잘 작동하는 것 같습니다. 그래도 내 앱에서 깜박이는 데 여전히 문제가 있습니다. 탭과 메뉴를 사용하고 있는데 탭이 특정 페이지에만 나타납니다. 동영상으로 보여드리고 싶은데 어떻게 해야 하나요?

대신 내가 복제하고 테스트할 수 있는 최소한의 codepen 또는 git repo를 만들 수 있습니까?
귀하의 앱과 유사한 설정

좋은 생각. 오늘 밤이나 내일 아침에 그렇게 하도록 노력하겠습니다. 당신의 도움을 주셔서 감사합니다.

@mhartington 방금 내 앱에서 테스트

Android N 미리 보기를 실행하는 Nexus 6, 6.0.1을 실행하는 Nexus 7 2013, 5.1을 실행하는 Moto X 2014 및 4.4.4를 실행하는 Nexus 7 2013에서 탭 스타터를 사용하여 수정 사항을 테스트했지만 깜박임이 표시되지 않았습니다. 그 장치 중 하나. 엄청난 !

@jordantomax 그 예를 모으는 데 행운이 있습니까?

@mhartington 죄송합니다, 완전히 늪에

@mhartington 방금 빌드 중인 앱에서 이것을 테스트했으며 Android 및 iPhone은 #5937로 수정된 것 같습니다.

@jordantomax , 예를 들어볼 기회가 있었나요?

감사 해요,
단

안녕하세요,

이 수정 사항은 잘 작동하지만 기본 페이지 전환 플러그인이 제대로 작동하지 않는 것 같습니다... 이 수정 사항을 적용한 후 전환이 미친 짓을 하고 있습니다. 연결되어 있다고 생각하십니까?

@tgensol 이 플러그인에 기본 매개변수를 사용하세요. 이 수정 프로그램과 잘 작동합니다!

모두들 안녕! 내 테스트를 통해 보이는 것처럼 수정 사항을 테스트하는 여러분이 작동하는 것처럼 보이므로 지금은 이 문제를 닫고 진행하겠습니다. @jordantomax 해당 테스트를 함께 할 기회가 있다면 자유롭게 게시해 주시면 기꺼이 다시 열겠습니다(:. 또한 @tgensol 위의 솔루션으로 문제가 해결되지 않으면 버그 시간에 대해 별도의 문제를 열어 주시겠습니까? 모두 감사합니다!

ionic repo의 주요 변경 사항으로 이것을 컴파일하고 빌드하는 방법

1.x 지점은 이제 Ionic 1.3.1 입니다. 저장소를 복제하고 분기를 체크아웃하면 gulp build 를 실행하여 배포 가능한 파일을 생성할 수 있습니다. 문제가 있으면 알려주세요.

감사 해요,
단

감사 해요. 이미 수동으로 배포판을 다운로드했습니다 :D

+1

나는 이것을 고쳤다. 이것은 ionic view update ionic bar bevavior: 들어가기 전에 생성된 새 막대와 이전 막대(현재)를 숨기는 것과 관련하여 발생합니다. 깜박입니다. 해결책은 이벤트 입력 후 현재 막대 숨기기를 연기하는 것입니다. 질문이 있는 경우 저에게 편지를 보내주십시오.

@smcreator 코드 조각을 공유할 수 있습니까?

나는 여전히 같은 문제가 있습니다 .... 모든 코드 스 니펫 감사합니다.

이 문제는 최근 ionic 버전에서 수정된 것 같습니다.

나는 같은 문제가 있었고 @princefr 의 응답이 tabs.html 파일의 상단에만 ion-nav-bar 추가하는 동안 문제를 해결했습니다.

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

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

문제를 주셔서 감사합니다! 이 문제는 원래 문제와 관련이 없는 댓글을 방지하기 위해 잠겨 있습니다. 이것이 여전히 최신 버전의 Ionic에서 문제가 되는 경우 새 문제를 만들고 템플릿이 완전히 채워졌는지 확인하십시오.