이 세상에서 safari 브라우저가 사라졌으면 좋겠습니다.
✅ 문제 상황
(gatsby + javascript 환경)
textarea에 한글을 입력 시 입력 딜레이가 발생(내가 타이핑 후 1초 뒤 화면에 반영)
영어 타이핑은 예민하게 본다면 약간의 딜레이가 느껴지는 정도 허나 다른 브라우저에 비하면 딜레이가 명확하게 느껴짐.
특이사항
- 크롬은 해당 현상 없음
- 네이버웨일 브라우저 해당 현상 없음
- 사파리 브라우저에서만 발생
- 사파리 브라우저 15.6 버전에서는 딜레이 현상 없음
- 사파리 브라우저 16.3 버전으로 업데이트 후 딜레이 현상 발생
✅ 원인 규명 과정
1. 렌더링 추정
추정 원인
textarea의 value를 state로 관리 중
영어 타이핑은 한번 타이핑에 한번 리렌더링으로 차이 없음. 허나 한글 타이핑 시 크롬브라우저는 한번 타이핑에 한번 렌더링, 사파리 브라우저는 한번 타이핑에 2-3번 렌더링 됨. 이것이 원인이라 추정.
결과
그러나 textarea의 value와 state의 관계를 끊고 타이핑 시 state를 변경하지 않도록 했음에도 한글 타이핑 딜레이 발생
(타이핑 시 리렌더링이 발생하지 않아도 딜레이 발생)
2. 새로운 textarea 생성
시도한 내용
모든 textarea에서 동일한 현상이 발생하는지 확인하기 위해
해당 컴포넌트의 모든 하위 컴포넌트들을 제거 후 새로운 textarea 하나만 생성해서
타이핑 딜레이 현상이 발생하는지 확인
결과
새로 생성한 달랑 하나있는 textarea는 타이핑 딜레이 현상이 발생하지 않음.
이를 통해 해당 페이지에서 있던 다른 컴포넌트가 원인이라 추정
3. 소거법 적용
시도한 내용
브라우저에 무리를 줄만한 엘리먼트들을 제거해가면 타이핑 딜레이 현상에 영향을 주는지 확인
결과
애니메이션 효과가 있는 svg 이미지와
CSS를 사용하여 만든 고수준의 애니메이션이 타이핑 딜레이에 영향을 주는것을 찾아냄.
✅ 해결책
이것은 해결책이 아니다.
이것은 임시방편이다.
왜 Safari에서 svg 애니메이션 이미지를 렌더링하였을 때
타이핑 중 딜레이가 발생하는지는 알아내지 못했다.
임시방편
- 사용자 브라우저를 확인 하여 safari인지 확인
- 만일 safari일 경우 애니메이션 이미지가 아닌 정적이미지로 대체
- safari가 아닌경우 기존의 애니메이션 이미지를 렌더링
