Overflow (1) 썸네일형 리스트형 Vue3 Carousel에서 화면 줄어들 때 이전 슬라이드가 겹쳐 보이는 문제 해결하기 프로젝트에서 Vue3 Carousel을 사용하다 보면, 해상도가 작아지거나 브라우저 창 크기를 줄였을 때 이전/다음 슬라이드가 화면에 겹쳐서 보이는 문제가 발생할 수 있습니다.처음에는 캐러셀 자체 버그인가 싶었는데, 원인은 뷰포트 영역이 슬라이드 밖 컨텐츠를 잘라내지 못한 것이었습니다.문제 상황아래와 같은 상황이 자주 발생합니다.데스크톱 풀스크린에서는 정상적으로 보임하지만 모바일이나 작은 화면에서는 이전/다음 슬라이드의 일부가 비쳐 보임특히 Motion 애니메이션(x: '50%') 같이 좌우로 이동하는 요소가 있으면 더 심해짐해결 방법해답은 의외로 간단했습니다.뷰포트 영역에 overflow:hidden을 강제로 주는 것만으로 문제를 해결할 수 있었어요..carousel__viewport { overfl.. 이전 1 다음
