컴파일 된 Cordova 앱, Android 7.0 WebView에서 임의의 아이콘이 서로 바뀝니다.

Question

jQuery Mobile을 사용하는 Cordova 모바일 앱을 만들고 있습니다. 이 응용 프로그램에서는 Font Awesome 라이브러리의 아이콘을 사용하여 버튼을 만들었습니다. Chrome에서는 모든 것이 훌륭하게 작동합니다. 아이콘이 정상적으로 나타납니다. 그러나 앱을 컴파일하고 Android 테스트 기기에서 실행하면 아이콘이 동일 페이지의 다른 아이콘을 무작위로 교체하기 시작합니다.

모바일 앱이 휴대 전화에서 실행되는 동안 Chrome DevTools를 사용하여 페이지를 검사하면 아이콘이 데스크톱 속성에서 올바르게 표시되지만 휴대 기기에서는 올바르게 표시되지 않습니다.

다음은 아이콘이 올바르게 표시되는 스크린 샷입니다. 모바일 앱이 휴대 기기에서 실행되는 동안 Chrome 앱을 검사하는 Chrome DevTools에서 가져온 것입니다.

다음은 장치에서 가져온 동일한 화면의 캡처입니다. 아이콘의 차이점을 빨간색으로 표시했습니다.

더 적절한 관찰과 사실 :

1. 우리의 주요 시험 장치는 안드로이드 7.0을 실행 삼성 S7S 있습니다 - 모든 장치가이 같은 문제가 있습니다.

2. 페이지가 몇 번 변경 될 때까지 아이콘이 서로 바꾸기 시작하지 않습니다.

3. 어떤 아이콘이 바뀌어도 일관성이 없습니다. 앱을 시작할 때마다 달라질 것입니다. 한 번 교체 한 아이콘은 다음 번에 손길이 닿지 않을 수 있습니다.

4. 이 문제는 이전 Android 테스트 기기 (Android 4.4.2를 실행하는 Droid Razr Maxx HD)에서는 발생하지 않습니다.

5. 내가 제거 android-targetSdkVersion와 응용 프로그램, 22로 설정 25 설정을 다시 컴파일 시도했습니다. 모든 경우에, 아이콘은 새로운 안드로이드에서 무작위로 교환을 계속합니다.

6. cordova-android을 최신 버전 (작성 시점 기준 6.2.3)으로 업그레이드 했으므로 문제가 남아 있습니다.

7. Chrome DevTools를 사용하여 글꼴 썸네일 아이콘 CSS 클래스 (예 : fa-user-plus)를 수동으로 제거한 다음 다시 추가하면 아이콘이 장치에 올바르게 표시됩니다.

8. 때때로 (아래 스크린 샷에서 볼 수 있듯이) 교체 된 아이콘 아래에 작은 흰색 선이 나타날 수 있습니다.

이 문제의 원인을 아는 사람이 있습니까? Chrome DevTools가 다른 것을 표시하는 동안 Chrome DevTools에서 어떻게 표시되는지에 대한 이론은 도움이 될 것입니다.

Answer 1

모바일 장치에서 스크롤하는 동안 position:relative 요소가 사라지는 동일한 앱에서 별도의 문제를 디버깅하는 동안이 문제에 대한 해결책을 찾았습니다.

iPad에서 테스트하지는 않았지만이 질문에 제공된 해결책 iPad Safari scrolling causes HTML elements to disappear and reappear with a delay 두 가지 문제가 모두 해결되었습니다.

-webkit-transform: translate3d(0,0,0)을 .ui-btn (버튼의 경우 jQuery Mobile 클래스)에 적용했습니다. 다시 컴파일 한 후에는 아이콘이 더 이상 임의로 서로 교환되지 않습니다.

-webkit-transform: translate3d(0,0,0)이 명백한 WebView 렌더링 버그를 수정 한 이유에 대해 거의 통찰력이 없습니다. 다른 사람이 무슨 일이 일어나고 있는지 더 깊이 이해한다면 코멘트를 남겨주세요!