Angular.js: IE11에서 짧은 시간 동안 ng-hide 및 ng-show가 동시에 표시됨

익숙한 소리입니다. 문제는 IE11에서 이들을 안정적으로 재현 할 수 없다는 것입니다. 저에게는 아마 30 번에 한 번 일어 났을 것입니다. Firefox에서도 한 번 본 적이 있으므로 브라우저가 requestAnimationFrame 대기열을 얼마나 빨리 플러시했는지 또는 애니메이션 허용 여부를 감지하는 데 걸리는 시간과 관련이있을 수 있습니다.

최신 스냅 샷과 테스트하시기 바랍니다 수 : http://code.angularjs.org/snapshot/angular-animate.js을 하고 덜 자주 발생하는지?

내 IE11에서는 확인란을 클릭 할 때마다 두 가지가 모두 깜박입니다. 연결된 각도 애니메이션을 사용해도이 동작이 변경되지 않은 것 같습니다.

이상 하네. 어떤 IE 및 OS 버전이 있습니까? 컴퓨터가 일반적으로 느리거나 부하가 적습니까?

우리는 꽤 고급형 컴퓨터를 가지고 있습니다 (그 중 세 대를 사용해 보았습니다). 제 초기 추측은 실제로 짧은 시간 동안 만 보이는 것을 보여줄만큼 충분히 빠르다는 것이 었습니다. IE 버전 11.0.9600.18202로 Windows 8.1을 실행하고 있습니다. 내가 사용해 본 컴퓨터 중 하나는 동일한 문제를 보여주는 Windows 7이었습니다.

나는 현재 문제를 피하기 위해이 CSS를 적용하고 있습니다.
.ng-hide.ng-hide-animate {
디스플레이 : 없음! 중요한;
}

물론 이것은 우리가 일부 ng-hide를 애니메이션하고 일부는 애니메이션하지 않으려면 미래에 문제를 일으킬 수 있습니다.

흠, 컴퓨터가 너무 빠르다고 생각하지 않았습니다. 그게 될 수 있습니다. 나는 또한 IE11 (11.0.9600.18204)의 약간 새로운 버전을 가지고 있지만 이것이 이유인지 의심합니다.

나는 가상 Windows 7의 IE11에서 이것을 시도했으며 2-10 번 시도 할 때마다 문제가 발생할 수 있습니다. 내 가상 머신이 느리게 실행되기 때문일 수 있지만 이것은 추측 일뿐입니다.

ng-switch가있는 Chrome에서 동일한 문제가 발생합니다. ngModel의 뷰 값 변경이 커밋되는 경우는 a) 부모 폼에서 ng-valid-parse 클래스를 제거하고, b) 폼 필드에서 클래스를 제거합니다 (사용자 정의 empty class) 및 b) ng-switch 뒤집습니다 (그러면 양식 필드가 비활성화되기 때문). 부모 애니메이션 (a) 작업이 먼저 실행되고 스케줄러가 완료 될 때까지 기다린 다음 양식 필드 (b)에서 작업을 실행하도록 다른 프레임을 요청한 다음 _another_ 프레임에서 ng-switch 애니메이션 작업을 실행하기 때문에 발생합니다. (c), ng-switch의 두 요소가 일시적으로 표시되는 한 프레임의 깜박임이 발생합니다.

@plestik plnkr.co 또는 이와 유사한 데모를 게시 할 수 있습니까?

@Narretz 내가 한 번

죄송합니다. Plunkr에서 재현 할 수 없습니다.

@Narretz 이 문제를 해결하기 위해 제가 할 수있는 일이 있습니까? 원하시면 일관되게 재현 할 수있는 스테이징 환경에 대한 로그인 자격 증명을 제공 할 수 있습니다.

편집 : 나는 구조적 애니메이션과 클래스 애니메이션을 결합하면 깜박임을 유발할 수 있다고 명확하게 말하는 문서의 일부를 놓쳤습니다. 그럼 신경 쓰지 마

OS X가 설치된 Chrome에서 비슷한 문제가 발생합니다. 제 경우에는 별개의 디스플레이 조건을 가진 두 개의 ng-show입니다 (동시에 사실이 아님). 두 조건을 차례로 전환해도 두 요소가 모두 표시되는 순간이 있습니다. 이것은 모든 페이지 구성에서 발생하는 것은 아니지만 특정 경우에 매우 일관되게 발생합니다.

angular 및 angular-animate 1.4.12를 사용하여 Windows의 Chrome에서도 동일한 문제가 있습니다.

@PhilipWallin 솔루션은 현재로서는 좋은 해결 방법입니다.

iOS 9.3 용 iOS 시뮬레이터에서 동일한 문제가 발생합니다. 문제를 보여주는 동영상을 업로드했습니다 : https://youtu.be/C0Lh5B1Lj6k

최근에 Angular 재질을 사용하여 손을 더럽 히고 기존 프로젝트에 포함 시켰으며 ng-if / ng-show를 사용하는 동안 Chrome에서 이러한 깜박임 동작을 경험하기 시작했습니다. 약간의 흔적과 오류가 발견 된 후 "ngAnimate"로 인해 문제가 발생했습니다.

@PhilipWallin 솔루션은 저에게 해결 방법으로 작동하며 앞으로 작동하지 않을 것이 확실하지 않습니다.

내 CSS에 아래를 추가하고 "ng-if"를 "ng-show"로 대체했습니다.
.ng-hide.ng-hide-animate {
디스플레이 : 없음! 중요한;
}

추신 : Angular 및 ngAnimate 버전 v1.5.7 사용

+1

안녕하세요, angular 1.5.8 (v 1.12.15에서 방금 업그레이드)과 비슷한 문제가 발생했습니다.

문제는 IE11에서 매우 분명하며 Chrome에서도 발생하지만 전환이 너무 빠르다는 사실을 알아 차리지 못하는 경우가 많습니다.

내가 가진 지시문은 transclusion을 사용하여 탭 페이지를 포함하는 탭 컨트롤입니다. 내가 경험하는 깜박임 (새롭고 오래된 활성 탭 페이지 html을 나란히 표시)은 사용자가 탭 사이를 전환 할 때 (즉, 컴파일 및 템플릿로드 후)입니다. 코드는 부울 플래그와 함께 ng-show를 사용하여 페이지를 표시할지 여부를 결정합니다 (한 번에 최대 1 개가 활성화 됨).
깜박임이 없으면 ng-show를 ng-로 바꿉니다.

내가 사용할 계획이었던 작업은 동일한 ng-show 조건부 플래그와 함께 ng-class를 사용하여 사용자 지정 CSS 클래스 '.myCloak {display : none! important}'(즉, ng-cloak에서 사용하는 동일한 CSS를 활성화하는 것입니다. ) 예
ng-show = "tab.active"ng-class = "{ 'myCloak': tab.active}"는 문제를 해결합니다.

시연을 위해 plunkr를 만들려고하지만 시간이 걸릴 수 있습니다.

그동안 IE11에서 앱에 표시되는 문제의 스크린 샷과 해당 문제를 찍은 동영상을 첨부하겠습니다.

스크린 샷에서 얇은 빨간색 둥근 사각형 내의 영역은 잘못 표시되는 탭 페이지와 관련 DOM 검사를 보여줍니다. 파란색 둥근 사각형 영역은 또한 표시되는 활성 탭을 강조 표시합니다.

비디오 [http://take.ms/czZZV]를 재생하면 일관성이 없지만 자주 발생하는 것을 알 수 있습니다.

Angular 1.5.8의 크롬 54에서 동일한 문제가 있습니다.

@PhilipWallin 솔루션은 지금도 작동합니다.

원인이 무엇인지 아십니까?

안녕하세요, 저는이 동작을 보여주는 plunk를 구성했습니다.

[https://plnkr.co/edit/PTrvz8]

IE11에서 실행하고 탭 페이지 사이를 전환하면 볼 수 있습니다. 코드는 약간 못 생겼지 만 문제를 보여줍니다. style.css ( @PhilipWallin 해결 방법)에서 ng-hide-animate 재정의의 주석 처리를 제거하면 문제가 사라집니다.

나는 이것을 월요일에 정리하고 여전히 재현 할 수없는 경우를 대비하여 plunk를 사용하여 문제에 대한 비디오를 게시 할 것입니다. 도움이 되었기를 바랍니다...

플렁크를 조금 정리하고 설명을 추가했습니다.
https://plnkr.co/edit/l70kaJ
이중 렌더링 이동을 명확하게 만들기 위해 각 탭 페이지 주위에 파란색과 빨간색 테두리가 있습니다 (IE11에서)

@teterovic이 문제 # 13974 발견으로이 문제는 버전 1.4.5에서 도입 될 것으로 보인다. 플렁크의 각도 및 각도 애니메이션 버전을 1.4.4로 변경하면 동작이 존재하지 않고 1.4.5까지 나타납니다.

@garycuthbert plnkr에 감사드립니다. IE11에서 문제를 아주 잘 보여줍니다. 조사하고 우리가 할 수있는 일이 있는지 살펴 보겠습니다.
그동안 요소에서 실제로 애니메이션을 사용하지 않는 경우 classNameFilter를 사용하여 해당 요소에서 애니메이션을 비활성화 할 수 있습니다. https://code.angularjs.org/snapshot/docs/api/ng/provider/ $ animateProvider # classNameFilter

안녕하세요 여러분,
@garycuthbert 의 예제에 대한 패치를 만들었습니다. 이 문제의 영향을받는 모든 사람이이 각도 애니메이션 파일로 테스트하고 문제가 사라지거나 동작이 개선되었는지보고 할 수 있습니까? https://rawgit.com/Narretz/angularjs-plunks/master/nganimate-ie-flicker-14015-2/angular-animate-patch-1.5.x.js

안녕하세요, 패치를 잘못 적용하고있을 수 있지만이 파일을 사용하면 다음과 같은 오류가 발생합니다.

이전 angular-animate.js 파일의 내용을 바꾸고 angular-animate-patch.js 파일을 명시 적으로로드하여 '알 수없는 공급자'$$ isDocumentHiddenProvider '에 대해 불평했습니다. 1.5.8 릴리스에 대해 실행 중입니다. 누락 된 것이 있습니까?

안녕하세요 @garycuthbert 저는 원래 앵귤러 마스터 용 패치 파일을 연결했습니다. 다음은 1.5 브랜치 용입니다. https://rawgit.com/Narretz/angularjs-plunks/master/nganimate-ie-flicker-14015-2/angular-animate-patch-1.5.x.js

감사합니다 @Narretz , 패치를 시도했고 IE11에서 문제를 해결했습니다.이 수정이 다음 1.5 릴리스에

다른 사람이 테스트 할 때까지 며칠을 기다릴 것이지만 그렇지 않으면 다음 주에 병합합니다. 현재 1.5.9에 대한 출시일이 없기 때문에 성공할 것이라고 생각합니다. 1.5.9가 언제 출시 될지는 말할 수 없습니다 ...

@Narretz를 수정

아직 확신 할 수는 없지만이 수정이 우리의 지시문에서 본 또 다른 문제에 도움이 될 수 있다고 생각합니다. 우리는 templateUrl을 사용하는 많은 중첩 지시문을 사용하며, 최신 앵귤러 릴리스에서는 상당히 추악한 일시적인 현상을보기 시작했습니다. 초기 페이지로드 및보기 전환시 렌더링.

templateUrl 메커니즘이 비동기 적이며 부모 / 자식 지시문이 서로 기다릴 수없는 일시적인 렌더링 유형을로드 할 수 없다는 점을 (지금은 더 많이) 감사하지만,이 문제와 비슷하게 보였습니다. 즉 상호 배타적 인 dom 덩어리가 같은 공간. 'templateUrl'대신 'template'을 사용하고 템플릿 캐시에서 html을 반환하여로드 속도를 높이는 방식으로 문제를 완화하고 있지만 이러한 변경 사항 중 일부를 실행 취소하고 애니메이션 패치로 다시 테스트하여 도움이되는지 확인합니다.

최종 관찰로 ng-include 및 ui-view 애니메이션 후크에 유사한 문제가 있다고 생각합니다. 고정하기는 매우 어렵지만 우리 앱이 두 가지 지시문을 광범위하게 사용하기 때문에 IE에서는 순 효과가 상당히 눈에 띄고 Chrome에서는 덜 두드러집니다 (효과는 상호 배타적 인 dom 덩어리의 간단한 렌더링입니다. 즉 @Narretz 가 가지고있는 동일한 문제 위의 ng-hide에 대해 해결됨).
사용자 지정 디렉티브 템플릿을 미리로드하고 '템플릿'을 사용하여 액세스하고 ng-include 및 ui-view에서 발생하는로드 /로드 된 이벤트에 반응함으로써 상황을 개선 할 수있었습니다 (사용자 지정 클래스 'display : 로드 이벤트와로드 된 이벤트 사이의 관련 노드를 숨기는 것은 중요하지 않습니다.) 문제는 여전히 가끔 발생했습니다.

이 모든 것을 취소하고 $ animateProvider.classNameFilter를 @Narretz 로 설정하여 제외 클래스를 지정하여 문제가 사라질 것을 제안했습니다.

현재 애니메이션을 사용하지 않지만 조만간 변경 될 가능성이 있습니다. classNameFilter를 사용하여 필요한 영역을 활성화 할 수 있습니다.

@Narretz , ng-include 및 ui-view 시나리오를 다루기 위해 수정 사항을 더 일반적으로 적용 할 수 있는지 확실하지 않지만 증상은 확실히 동일하게 보입니다.

수정 사항은 ngShow / ngHide 지시어 코드가 아니라 애니메이션 로직 자체에 있다는 점에서 "일반적"입니다. 그러나 ngShow / Hide는 ngInclude 및 ngView에서 사용하지 않는 특정 애니메이션 기능 (임시 클래스)을 사용합니다. 예를 보지 않고 그들에게 어떤 문제가 있는지 말하기는 어렵습니다.

안녕하세요 Narretz,
나는이 문제를 한동안 고치려고 노력 해왔고이 패치를 적용한 후 버전 1.5.0.Beta 문제를 수정했지만 여전히 1.5.8에서는 작동하지 않습니다. 경로 주셔서 감사합니다 :)

또한 패치에서 나는 '==='로 변경 한 후 작동하는 곳에서 double equal '=='가 사용되었음을 즉시 알았습니다. 조건 확인을위한 올바른 구문입니다.

나는 또한 추가 버전 1.5.9 및 1.6.0에서 이것을 시도했지만 어쨌든 패치로 여전히 작동하지 않습니다. 어떤 도움이라도 대단히 감사하겠습니다.

감사
파하드

크리스마스 이후 @gkalpak 의 PR을 검토하고 빨리 받아 볼 수 있기를 바랍니다.

1.5.9 및 1.6.1에서 작동하지 않는 추가 버전에서 시도했습니다. 모든 도움 / 제안은 매우 감사 할 것입니다. 감사
파하드

1.5.10에서도 여전히 동일한 문제

같은 문제가 발생하여 1.3.x에서 1.6.1로 업그레이드를 시도하고 1.4.4로 다시 다운 그레이드해야했습니다. Angular 팀에게 얼마나 당황 스러운가

@ stijn26 당신은 아마도 뭔가 잘못했고 이것은

• 1.6에는 1.X-1.5와 비교할 때 주요 변경 사항이 있습니다.
• 모든 모듈을 업데이트 했습니까? 해당 개정판에 대한 angular-animate.js 또는 angular.min.js처럼? 시도하지 않으면

모든 주요 변경 사항을 확인하고 수정했으며 모든 모듈이 업데이트되었습니다. 이 스레드의 나머지 사람들과 똑같은 문제가 발생했습니다.

트윗 담아 가기
지금은 애니메이트를 켜고 끄는 해결 방법을 찾았으며 지금까지 제대로 작동하고 있습니다. 예는 아래와 같습니다. 팀이 올바른 해결책을 찾을 때까지 여러분에게도 도움이되기를 바랍니다 ???

$animate.enabled(false);
    $scope.$on('$destroy',
        function() {
            $animate.enabled(true);
        });

Windows 7의 Chrome 57에서 angular 1.6.3의 ng-show에서이 깜박임이 발생합니다. 디스플레이 : none on .ng-hide.ng-hide-animate가 문제를 해결합니다.

@ samal84 데모를 제공해 주시겠습니까? 1.6.4로 업데이트 된 첫 번째 게시물의 plnkr로 Chrome 58에서 이것을 재현 할 수 없습니다.

네, 앵귤러 머티리얼 md-switch의 버그처럼 보입니다. 이제 최소한의 데모를 만들려고했습니다. http://plnkr.co/edit/hR2B8yEPjak0v2Yryid1?p=preview

스위치를 빠르게 클릭하면 md-switch 내부와 외부의 on / off가 다르게 작동하는 것을 볼 수 있습니다. 안쪽 하나는 잠시 동안 렌더링되고 바깥 쪽 하나는 괜찮습니다.

@ samal84 또한 $ animate를 비활성화하여 해결되었습니다 (각 재료가 사용하는). 데모:
http://plnkr.co/edit/C08HPffIBTomH1QoBdRD?p=preview