Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@dnd-kit/core 라이브러리의 DndContext 사용시 하단에 빈 스크롤이 생기는 현상 제보 #531

Open
ghost opened this issue Oct 28, 2024 · 1 comment

Comments

@ghost
Copy link

ghost commented Oct 28, 2024

안녕하세요,

@dnd-kit/core 라이브러리의 DndContext를 사용할 때 접근성을 지원하기 위해 생성되는 LiveRegion 컴포넌트로 인해 하단에 불필요한 스크롤이 생기는 문제가 발생해서 제보드려요.

이 문제는 LiveRegion 컴포넌트가 position: fixed로 지정되면서 뷰포트 하단에 고정되고, 이로 인해 stackflow의 스타일 속성과 충돌하여 예상치 못한 레이아웃 문제가 발생하는 것으로 예상하고 있는데요.

비슷한 문제를 다룬 관련된 이슈를 참고해서 이 문제를 해결했어요. 해결 방법은 LiveRegion 컴포넌트를 stackflow div의 외부로 이동시켜 stackflow의 CSS 속성과의 충돌을 방지하는 것이었어요.

이 문제를 해결하기 위해 position: fixed 속성과 stackflow 내부의 스타일과 충돌하는 부분을 확인해주시면 좋을 것 같아요. 검토 부탁드려요!

@ghost ghost changed the title @dnd-kit/core 라이브러리의 DndContext 사용시 하단에 빈 스크롤이 생기는 문제 @dnd-kit/core 라이브러리의 DndContext 사용시 하단에 빈 스크롤이 생기는 현상 제보 Oct 28, 2024
@milk717
Copy link

milk717 commented Oct 29, 2024

재연 가능한 최소 예제를 통해 확인한 결과 activity 요소에 적용된 transform: translate3d(0, 0, 0); 속성이 새로운 스태킹 컨텍스트를 형성하면서, 자식 요소의 position: fixed가 뷰포트 영역이 아닌, activity 요소를 기준으로 고정되는 현상이 발생하는 것을 확인했습니다!

이 문제는 특정 라이브러리나 코드베이스에 한정된 것이 아니라, 스태킹 컨텍스트를 생성하는 CSS 속성의 동작에 따른 일반적인 이슈로 판단됩니다. 따라서, 이슈를 라이브러리 관점에서 어떻게 처리할지 검토 부탁드립니다!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant