mac scroll 정책 이슈

1. 문제상황

• 크롬/사파리에서 MacBook + 마우스 사용 시 가로 스크롤바 상시 노출.
• 마우스 연결 해제 또는 트랙패드 사용 시 스크롤 동작 중에만 가로 스크롤바 노출.

2. 핵심 원인

macOS 스크롤 입력 방식에 따른 스크롤바 표시 정책 차등.

• 마우스 입력

  • 스크롤휠 기반 입력.
  • 정밀 제스처 미지원 판단.
  • 스크롤바 상시 표시.

• 트랙패드 입력

  • 제스처 기반(두 손가락 스크롤).
  • 필요 시에만 표시 정책 적용.
  • 스크롤 중에만 스크롤바 표시.

결과

• 마우스 연결 상태: Chrome/Safari 공통 가로 스크롤바 상시 표시.
• 트랙패드 단독 사용: 스크롤 중에만 가로 스크롤바 표시.

macOS 설정 위치

시스템 설정 → 손쉬운 사용 → 디스플레이 → 스크롤 막대 표시

• 자동으로 스크롤할 때만
• 마우스 사용 시
• 항상

현재 상태 추정: 마우스 사용 시 설정 가능성.

💡 브라우저 이슈 아님. Chrome/Safari/Firefox 공통. macOS 시스템 레벨 동작. CSS 또는 브라우저 버그 원인 아님.

개발 관점 참고 (FE)

• CSS 기반 macOS 스크롤바 표시/숨김 강제 불가.
• ::-webkit-scrollbar 기반 스타일링 가능.
• 표시/숨김 정책은 OS 우선.
• 입력 장치 상태(마우스/트랙패드) 기반 정책 변경 차단 불가.

3. 해결방안

<div class="table-wrapper">
  <div class="table" />
  <div class="shadow" />
</div>

• 기존: shadow에 height: 100% 적용.
• 변경: table element offsetHeight 기반 shadow 스타일 주입.
• 목적: table-wrapper 높이와 shadow 높이 정합.