컴퓨터에서는 퍼포스 잔디가 정상적으로 나왔지만 모바일에서는 이상하게 나오는 문제가 있었다. 이걸 해결하기위해 우선 gemini 한테 물어봤고 수정했지만 증상은 개선되지않았다.

처음 개선은 스크롤박스를 추가해주는것이었다. 그걸로 얼추 되었지만 스크롤박스의 크기가 잔디의 크기보다 더 크게 잡혀져 있어서 빈 공간이 너무 많았다. 왜그런지 여러가지 시도를 해봤는데 왠지 마우스를 올리면 나오는 튤팁이 있는데, 이것들을 미리 퍼포스 잔디 컨텐츠 안에 만들어놓고 hidden 상태로 둔 다음 마우스를 올리면 visible 만 하는 방식인듯했다. 튤팁이 보일때의 크기를 보니 얼추 스크롤박스의 크기와 같았다.

일단 튤팁을 잔디가 렌더되고있는 창과 분리를 했고 그러니까 스크롤박스는 정상적으로 채워져서 나왔다. 하지만 튤팁이 나오지 않는 문제가 생겼다.

튤팁이 보일때와 안보일때 페이지 전체의 스크롤박스를 보니 미세하게 크기가 바뀌었다. 퍼포스 잔디에 마우스를 가져다대면 튤팁이 표시되긴 하지만 잘못된 위치에 표시되고 있는 느낌이 들었다.

어디에 표시되는지 디버깅이 필요했다. 무한히 긴 십자가를 표시하면 되지않을까 했지만 해결되지않았고 여러가지를 시도해봤지만 결국 되지 않았다.

다시 처음부터 시작했다. 일단 모든 변경사항을 되돌리고, 튤팁이 표시되는 방식부터 살펴봐야했었다. 튤팁은 내 예상과 같게 미리 만들어놓고 visible을 끈 상태에서 마우스를 hover 하면 표시하는 방식이었다. 그렇기에 hidden 상태에 있는 튤팁도 모두 스크롤박스 크기에 들어가면서 빈공간에 스크롤박스가 생기는 문제가 있었다. 이걸 중심으로 분리 작업을 시작했다.

방식을 자바스크립트로 동적으로 생성되는 방식으로 변경했고, 최상단 레이어에 표시되게 수정하니 정상적으로 표시되었다.