content-visibility 와 fixed 값 오류

css로 뷰포트에 노출되지 않은 요소의 렌더링을 제어하는 content-visibility 속성이 브라우저 체크 값을 느리게 잡기 때문에
position : fixed 값과 충돌 하여 뷰포트 시작점을 다르게 잡는 문제 발견
구조상 modal이 body 직속 하위에 위치할 수 없기 때문에
렌더되는 요소가 메인 비쥬얼 노출도 아니기도 해서 해당 css 속성 제거

신규속성이라 기존속성과 부딪히는 점이 많아서 사용시 교차 테스트가 필요해보임

redit에서 5년 전에 언급됐지만 현재까지 수정이 되지 않은 걸로 보아 적용해도 좋을지...
링크에는 safari에서는 적용하지 않겠다는 이야기가 있지만 현재는 대부분 브라우저에서는 지원한다.

요소를 숨기는 다른 일반적인 방법들과 비교해봅시다.

• display: none:
  요소를 숨기고 렌더링 상태를 제거합니다. 즉, 해당 요소를 표시하기 위해서는 새 요소를 렌더링 하는 것만큼 비용이 많이 듭니다.

• visibility: hidden:
  요소를 숨기면서 렌더링 상태는 유지합니다. 이것은 문서에서 요소를 실제로 제거하지 않으며, 여전히 페이지에서 공간을 차지하고 클릭할 수 있는 상태입니다. 또한 숨겨져 있더라도 필요하면 렌더링 상태를 업데이트합니다.

• 반면 content-visibility:
  hidden은 렌더링 상태를 유지하면서 요소를 숨기는데, 상태를 변경해야 할 일이 생기면 요소가 다시 화면에 표시될 때만 변경합니다.(예로 content-visibility: hidden 속성이 제거되는 경우)

출처 : content-visibility: the new CSS property
원문
번역