이 글의 성격은 무엇인가요?
질문 / 문제 해결
내용을 설명해주세요
Android 토스 앱 업데이트 이전에는 동일한 빌드/코드에서 이 현상이 전혀 없었습니다. 토스 앱 업데이트 이후, 시스템 뒤로가기 버튼을 눌러 종료 팝업이 표시되는 시점에 메인 콘텐츠 영역이 크게 깜빡이는 현상이 있습니다.
상단 토스 바, 하단 탭, 종료 팝업은 유지되지만 이미지/카드/본문 영역만 순간적으로 사라졌다가 다시 복구됩니다.
여러 웹 측 대응을 시도했지만 개선되지 않아 WebView repaint/invalidate 관련 이슈인지 문의드립니다.
[개발 환경]
- React 19 + Vite 6
- React Router
MemoryRouter @apps-in-toss/web-framework: 2.4.3@toss/tds-mobile-ait: 2.3.0@toss/tds-mobile: 2.3.0react-router-dom: 7.14.0motion: 12.38.0
[테스트 환경]
- 실제 운영 토스 앱, QR 테스트 환경 모두 재현
- OS: Android
- 토스 앱 버전: 5.275.1
- iOS 미테스트
[현상]
- 홈 화면: 배경 이미지와 본문이 사라지고 검정 배경처럼 보였다가 복구됩니다.
- 탐색/인기 탭: 카드 목록이 사라지고 회색 빈 영역만 보였다가 복구됩니다.
- 다른 미니앱에서도 약간의 깜빡임은 보이지만 저희 앱에서는 유독 심하게 보입니다.
[시도한 내용 — 모두 효과 없음]
AnimatePresence/motion애니메이션 제거 및 옵션 변경MemoryRouter↔HashRouter변경history.pushState기반 history guard 적용html,body,#root및 페이지 배경색 통일<img>→ CSSbackground-image전환- 이미지
loading="eager",decoding="async"적용 will-change,transform: translateZ(0)등 GPU layer 관련 CSS 테스트
[질문]
- 최근 토스 앱 업데이트 이후 Apps in Toss WebView의 뒤로가기 처리 또는 종료 팝업 표시 시점의 snapshot restore / repaint / invalidate 방식에 변경이 있었을까요?
- WebView 렌더링 영역 깜빡임을 줄이기 위한 권장 사항이나 설정 옵션이 있을까요?
예:granite.config.ts, WebView 배경색 지정, navigation 관련 옵션 등 navigationBar.withBackButton: true설정 시 native back 처리와 WebView 렌더링 사이에 별도 트랜지션 또는 repaint 처리가 있는지도 궁금합니다.
첨부 이미지는 시스템 뒤로가기 → 종료 팝업 표시 시점의 인기 탭 화면입니다. 평소에는 카드 3장(이미지 + 텍스트)이 정상 렌더링되지만, 해당 순간 카드 영역이 모두 사라지고 회색 빈 영역만 남습니다. 카드 위에 떠 있던 하트 카운트 뱃지(
6, 6, 4)와 하단 탭은 그대로 유지되어, 콘텐츠 영역만 선택적으로 invalidate되는 것으로 보입니다. (앱 명칭은 가렸습니다. 추가 영상/스크린샷 필요 시 비공개 공유 가능합니다.)
appName (선택)
weathertrip
