잘라야 하는 컨테이너는 overflow: hidden 대신 clip

공동 편집 화면에서 「나에게만 보이는 내용」이 생긴다. 잘린 영역 안의 내용이 어긋난 위치에 그려지고, 다른 사람 화면과 위치가 다르다.

overflow: hidden은 넘친 부분을 숨기기만 하는 것처럼 보이지만, 실제로는 스크롤바 없는 스크롤 컨테이너를 만든다. 사용자는 스크롤할 수 없어도 프로그램은 할 수 있다. 편집기가 커서를 따라가거나, focus()나 scrollIntoView()가 불리면 이 컨테이너가 몰래 스크롤되고, 그 상태로 남는다.

자르기만 원한다면 overflow: clip을 쓴다. clip은 스크롤 컨테이너를 만들지 않아 프로그램 스크롤(scrollTop, 커서 따라가기)도 막힌다.

/* 몰래 스크롤될 수 있다 */
.viewport {
  overflow: hidden;
}

/* 자르기만 한다 */
.viewport {
  overflow: clip;
  overflow-clip-margin: 0; /* 필요하면 그림자 등 여유 */
}

하나 다른 점: clip은 스크롤 컨테이너가 아니므로 안쪽 position: sticky의 기준이 되지 않는다. 안에 sticky 요소가 있다면 그 기준이 바깥 스크롤 컨테이너로 바뀌는지 확인한다.