Portfolio v2 - 4. Mobile Bugfix

끝인줄 알았지?

하면서 나타나는 버그들..... (ㅂㄷㅂㄷ)

웹에서 나타나는 버그들은 이미 거의 다 해결해서 자잘한 오류 수정 정도야 있을 수 있겠다 생각했지만, 역시 오산이었다.

실제 핸드폰으로 웹 사이트를 열어보니 홈 화면부터 안나온다...

 

# 홈 화면 비디오 재생 에러

가장 심각한 문제부터 해결해보자.

근데 신기한 것은 갤럭시에선 또 이문제가 발생하지 않는다.

오직 아이폰에서만 발생한다.

억울함의 증거 영상

원인은 비디오의 autoplay guide가 OS 별로 다른 것 때문으로 유추된다.

데스크탑 크롬이나 안드로이드에서는 비디오가 muted 설정만 되어있어도 문제가 없지만 ios는 그렇지 않다.

일단 autoplay 속성이 없으면 로드조차 하지 않고, playsInline 속성이 없으면 js에서 play() method로 재생이 불가능하다.

(MDN에선 그런 말 없었잖아요....)

 

아무튼 그런고로 아래와 같이 관련 속성들을 덕지덕지 붙여준 뒤에야 모바일에서 제대로 동작하는 것을 확인할 수 있었다.

 

 

# 아니 근데 왜 iOS Chrome에서는 또 안돼....?

iOS Safari에서는 잘 돌아가는걸 확인했다.

그런데 왜 크롬에서 또 안되는건데... (믿었던 크롬 너마저!!!)

현재 이 문제를 해결 중이다. 추후 해결되면 업데이트가 될 것이다... 아마도...

 

 

# 왜 width가 왜 다르지....?

분명히 프로젝트 페이지의 오른쪽 sidebar 버튼은 아주 동그랗고 작고 예뻤었다.

근데 왜 애가 찌그러졌지...?

왜 타원이 되어버렸다냐...?

원인은 button의 default padding 값이었다.

개발 환경에서는 left, right padding 기본 값이 6px이었기에 버튼 크기보다 작아 문제가 없었으나,

ios에서는 기본 값이 1em, 즉 16px이었기에 버튼이 통통해져버린 것이다.

억울함의 증거 사진

간단하게 padding 값을 0으로 설정해줘서 해결했다.

 

 

# useEffect 내부 scrollTo 문제

Project 페이지에는 사실 숨겨진 요소가 있다.

사이드바를 보면 눈치챌 수 있지만 처음 보여지는 Portfolio Page 아이템은 사실 두 번째 아이템이다.

첫번째 아이템으로 이런 것이 숨겨져있다.

useEffect를 사용해서 컴포넌트 로드 시 두 번째 아이템으로 스크롤되도록 하는 트릭을 써서 감춰놓은 것이다.

그런데 다른 페이지를 갔다가 다시 project 페이지로 돌아오면 useEffect 내부 scrollTo가 제대로 작동하지를 않는다.
그 와중에 project 페이지에서 새로고침하면 잘 동작을 한다.

그리고 놀라운 것은 에러 상황에서도 scrollTo 함수는 실행되며 내부 parameter 값 또한 정상 동작일 때와 같다. 이 무슨...??

원인은 useEffect 실행 시 페이지가 완전히 렌더링 되지 않은 상태일 수 있다는 것으로 추정된다.

(라고 stack overflow에서 말하더라)

그러니 페이지 렌더링이 끝난 후 스크롤이 실행되도록  setTimeout을 걸면 해결된다.

그럼에도 불구하고 수정 전 코드에서 scrollTo에 브레이크 찍고 문서 전체 height나 scrollTarget 값이 잘 나오는데도 왜 스크롤이 안되는지는 잘 이해가 되지 않는다.

크기 값이 다 정확히 나오는데 도대체 왜...?

브라우저 내부에 렌더링 완료되지 않았으면 스크롤 막는 코드라도 있나...????

 

 

 

역시 디버깅의 끝은 없다.

오로지 서비스 종료만이 디버깅을 멈출 수 있는 방법이다.