버튼이 자유분방하게 움직인다고?
회사에서 업무를 진행하던 도중 놀랍게도 말썽꾸러기인 사파리 환경이 아니라 크롬, 삼성 브라우저에서 이슈가 발생하였다.
QA팀 제보로 알게 되었는데, bottom: 0으로 박아두었던 버튼이 자유분방하게 돌아다닌다는 것이다.
 |
 |
 |
놀랍게도 position: sticky / bottom: 0px 의 조합으로 구현된 footer버튼이 전혀 예상하지 못한 방향으로 동작하였다.
원인 파악
사실 이 글을 작성하는 시점에서도 정확한 원인을 알 수 없다는 게 좀 슬프다.
단지, 브라우저의 뷰포트를 잘못 인식하는게 아닌가 "추측"만 할 뿐이다.
특히 이는 본문 시작할 때 언급한 것 처럼 크롬, 삼성브라우저 중에서 유독 삼성브라우저에서 재현이 잘된다.
크롬의 경우에는 "특정 버전"에서만 sticky 오류가 발생한다는 글을 발견하였는데, 114 버전에서만 발생한다고 한다.
Unexpected transition in sticky elements in the latest Google Chrome - Google Chrome Community
support.google.com
재미있게도 QA팀에서 오류가 발생한다고 알려준 기기의 크롬 버전 역시 114 버전이라는 점이다.
삼성 브라우저의 경우에는 아무래도 브라우저 자체 이슈라고밖에 판단된다.
애초에 자료조사를 해보면 삼성 브라우저에서 갖가지 오류들이 발생하여 곤욕을 치른 경우가 많아 보였다.
그 과정에서 알게 된 사실은 삼성브라우저는 스크롤 주도권을 가져오도록 설정되어 있기 때문에 그 과정에서 이슈가 발생한 게 아닐까 추측된다.
그래서 삼성브라우저 관련 이슈를 살펴보면 스크롤 관련 이슈들이 심심치 않게 보인다.
그래서 해결 방법은?
뭐 정확한 원인을 알 수 없다 해서 문제를 해결하지 않을 순 없지 않은가?
단순하게 Header와 Footer영역을 Fixed로 변경하면 해결이 가능하겠지만 그러면 손이 많이 가서 다른 방법이 없나 찾아보았다.
그러던 중 아주 재미난 내용을 발견하였다.
https://www.stevefenton.co.uk/blog/2022/12/mobile-position-sticky-issue/
Mobile browser bars being hidden can affect CSS position sticky bottom
A strange CSS positioning issue found on mobile browsers when the address bar is removed.
www.stevefenton.co.uk
여기서는 Edge를 사용할 때 발생한 이슈라는데 아무래도 우리와 동일한 이슈가 아닌가 싶다.
몇 가지 해결방안을 알려줬는데 가장 간단하고 흥미로운 방법은 마지막 방법으로 소개된 방법이다.
바로 Fixed가 설정되어 있는 빈 태그를 삽입하라는 것이다.
<div style="position: fixed;"></div>진짜 단순하게 이렇게만 빈 태그를 넣어주면 해결이 된다는 것이다.
여기서 문득 일리가 있다고 생각이 들었는데, 그 이유가 해당 이슈가 발견되었던 곳은 운영배포한 후에 발생했다는 점이다.
테스트 서버에서는 워터마크를 삽입하여 테스트 서버라고 화면에 표시를 하고 있는데 그게 Fixed가 설정된 태그였다.
그래서 테스트 서버에서는 발생을 안 하고 운영서버에서만 발생하였던 것이다.
혹시나 하고 테스트서버에서 워터마크를 지워보니 아니나 다를까 운영서버와 동일한 이슈가 발생하였다.
그래서 해당 글을 참고하여 Root경로에 Fixed를 가진 div태그를 넣어주니까 해당 문제는 깔끔하게 해결되었다.
뭔가 브라우저 이슈로 보여서 나중에는 이러한 조치조차 필요 없지 않을까?
참 어이없지만 재미난 이슈 었다.
댓글