버그 수정하기1

모바일 버그

1. 모바일에서 스크롤을 조금 했는데 가로 스크롤이 생긴다.
2. backdrop-fillter 속성이 모바일엔 적용이 안되었다.
3. 모바일에서 끝까지 스크롤했다가 다시 위로 올릴 때 blend 이미지 위치가 혼란스럽게 노출된다.
4. 모바일에서 canvas caption이 너무 아래에 위치해있다.
5. orientationChange 이벤트 발생시 변수값들 업데이트가 제대로 안된다.
   가로모드에서 세로모드로 바꾸면 가로모드 값들이 적용되는 식이다.

해결

1. 1번 문제 해결 : .container {overflow-x : hidden} - 가로스크롤 방지
2. 2번 문제 해결 : backdrop-fillter - iOS에선 밴더프리픽스를 붙여줘야된다. -webkit
3. 3번 문제 해결 : 3번째 섹션으로 진입할 때 rectStartY 값 업데이트해준다.

   window.addEventListener('resize', () => {
       // 아래 수치 900은 요즘 모바일 길이가 길어졌기 때문
       if (innerWidth > 900) {
           sceneInfo[3].values.rectStartY = 0;
       }  
   })
   

4. 4번 문제 해결 : canvas caption의 margin-top 값 조정
5. 5번 문제 해결 : setTimeout 활용한다.
   계속 orientationChange 이벤트가 연속적으로 발생할 경우를 대비하여 clearTimeout 활용