웹뷰 개발 시 문제 해결방법 공유

1. SVG blurrly on iphone(safari)

문제점

<img url="image.svg" /> 

• safari에서 svg 확장자 이미지가 블러(blur) 처리되는 문제가 발생
  
  
• svg, xml로 이루어진 간단한 아이콘같은 경우는 상관없음
• svg 확장자가 아닌 이미지가 들어간 경우 이러한 문제 발생

<svg>
	<image xlink:href="data:image/png" />
    => image 태그의 이미지 확장자가 svg가 아닐 경우
</svg>

해결방법

<object type="image/svg+xml" data="image.svg"></object>

• iframe, embed 태그를 사용하는 것도 가능

2. Swiper.js 라이브러리

문제점

• 웹 브라우저에서는 정상적으로 보이는 페이지네이션
• 특정 모바일 디바이스에서 페이지네이션이 안보이는 문제 발생

해결방법

• 기본적으로 웹 브라우저에 swiper-pagination의 너비 값 100%
• 일부 App 환경에서 엉뚱한 너비 값이 들어가 있을 수 있는 오류
• swiper-pagination 자체에 고정 너비 값 부여

.swiper-pagination { width: 320px; }

결론: 웹뷰는 웹 브라우저, IOS 앱, IOS 브라우저, 안드로이드 앱, 안드로이드 브라우저까지 모두 고려해야 함....^^