iOS/Android flutter 웹뷰 렌더링 엔진 이슈 해결

iOS flutter 웹뷰 환경에서 구동중인 next.js 프로젝트의 a 태그를 터치했을 때, 화면이 전환되었음에도 불구하고 a 태그의 잔상이 0.5초 정도 남아있던 이슈가 있었다.

 

https://github.com/pichillilorenzo/flutter_inappwebview/issues/1553

Problem with afterimage remaining when button is clicked in iOS · Issue #1553 · pichillilorenzo/flutter_inappwebview

(위 링크에 있는 시현 동영상에 보였던 에러와 일치한다.)

 

해결은 어렵지 않았다. 최상단 CSS 프로퍼티에 아래의 코드를 입력해주면 말끔히 해결된다.

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

 

이슈야 별 것 없었지만 이슈가 난 배경은 상당히 흥미로웠다. 그래서 사내 문서에 해결 과정을 남겨놓았는데 내 블로그에도 남기면 좋을 것 같아 여유가 났을 때 한번 옮겨 적어본다.

---

safari a태그 잔상에 관련된 이슈(webkit)

모 프로젝트 개발 중 웹뷰에서 Next.js 화면을 띄울 때 a 태그를 클릭할 경우 iOS에서만 잔상이 남는 현상이 있었다.

(안드로이드 환경에서는 이슈가 없었다.)

이러한 이슈가 생긴 이유는 안드로이드와 iOS가 웹뷰에서 사용하는 브라우저가 각각 다르기 때문으로 보인다.

(각각 Chrome과 safari를 사용한다.)

 

1. 브라우저

브라우저는 여러개의 엔진으로 구성되어 있다.

이중 프론트엔드 개발자가 개념적으로 알고있어야 하는 엔진은 런타임 엔진과 렌더링 엔진이다.

1-1. 런타임 엔진

런타임 엔진은 브라우저가 열린 뒤에 동작하는 자바스크립트를 구동하는 역할을 한다. 우리가 아는 V8 엔진이 대표적인 자바스크립트 런타임 엔진이다.

1-2. 렌더링 엔진★

사용자가 요청한 HTML 문서와 CSS를 파싱해서 화면에 그리는 역할을 수행한다. 정확히는 HTML과 CSS를 파싱한 후 렌더트리를 만들어 브라우저에 반영하는 역할을 한다.

 

2. CSS 접두어 -webkit

-webkit- : 구글, 사파리 브라우저에 적용.
-moz- : 파이어폭스 브라우저에 적용.
-o- : 오페라 브라우저에 적용.
-ms- : 익스플로러에 적용. (사실상 쓸일이 없음)

-webkit은 구글과 사파리 브라우저 둘 다 적용된다. 두 렌더링 엔진의 근본이 -webkit으로써 같기 때문이다.

그렇다면 여기서 의문점이 생긴다. 둘의 근본은 같은데 왜 iOS에서만 이슈가 발생했을까? 

 

3. Chrome과 safari의 렌더링 엔진은 다르다.

Chrome의 렌더링 엔진은 Webkit에서 fork되어 새로 개발된 Blink라는 렌더링 엔진을 사용하고, safari의 렌더링 엔진은 기존의 webkit을 그대로 사용한다.

 

그러므로 둘은 큰 틀에서 비슷하다.

하지만 세부적인 차원에서는 다르다. 이번 iOS와 안드로이드 웹뷰 간 이슈가 발생한 이유다.

3-1. Webkit과 blink의 아키텍처 차이

Blink가 webkit에서 파생되긴 했지만 둘의 아키텍처는 기본적으로 다르다고 한다.

• Blink는 멀티 프로세스 아키텍처로 구현되어 있으며, 렌더링 엔진과 브라우저 엔진(렌더 트리와 JS를 합치는 등의 역할을 수행하는 엔진)의 역할이 별도로 분리되어 있다. 즉 Blink는 렌더링 엔진으로써만 동작한다. 
• webkit은 싱글 프로세스 아키텍처로써 렌더링 엔진과 브라우저 엔진이 하나의 프로세스로써 동작한다.

그러므로 같은 css 스타일을 가진다고 하더라도 엔진 차원에서 화면에 반영하는 것은 다소 차이가 발생할 수 있다.

https://www.quora.com/How-different-has-Webcore-become-between-Blink-and-Webkit

How different has Webcore become between Blink and Webkit?

 

결론 : 크로스 브라우징 이슈가 아닌 크로스 엔진 이슈

iOS에서 잔상이 남았던 이유는 탭이나 클릭으로 a 태그를 선택했을 때 해당 위치를 알려주기 위해 브라우저가 강조 이펙트를 생성했기 때문이다. 강조 화면이 나타난 것 까지는 좋았는데, 다음 화면으로 넘어갔을 때 iOS에서는 그 강조 표시를 제대로 처리하지 못했다. 그래서 탭 하이라이트 컬러를 투명하게 만들었고, 이슈가 해결되었다.

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

 

위의 프로퍼티를 전역에 선언함으로써 이슈는 해결되었지만, 부작용으로 Chrome에도 탭 하이라이트가 사라지게 될 것이다. 

 

요약

1. Chrome과 safari의 렌더링 엔진은 아키텍처 차원에서 다르다.

2. 그럼에도 불구하고, 두 렌더링 엔진의 근본은 같기 때문에 비슷한 부분이 많다.

3. -webkit 접두사를 이용해 문제를 해결할 수 있으나, 스타일에 대해서는 Chrome과 safari 둘 다 영향을 받는다.