From 8b88984765d0cf75044c030960f7ad50939b6f23 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 4 Jul 2026 13:59:05 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20Bolt:=20[=EC=84=B1=EB=8A=A5=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0]=20=EC=98=A4=ED=94=84=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A6=B0=20=EC=84=B9=EC=85=98=20=EB=A0=8C=EB=8D=94=EB=A7=81=20?=
 =?UTF-8?q?=EC=B5=9C=EC=A0=81=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- `.section` 요소에 `content-visibility: auto` 속성을 적용하여 화면 밖에 있는 콘텐츠의 렌더링을 지연시킵니다.
- 브라우저의 레이아웃 계산 오류로 인한 스크롤 튀는 현상(scrollbar jumping)을 방지하기 위해 `contain-intrinsic-size`에 적절한 기본 높이(600px)를 지정했습니다.
---
 .jules/bolt.md | 3 +++
 styles.css     | 4 ++++
 2 files changed, 7 insertions(+)

diff --git a/.jules/bolt.md b/.jules/bolt.md
index 8de11f5..073f0e3 100644
--- a/.jules/bolt.md
+++ b/.jules/bolt.md
@@ -4,3 +4,6 @@
 ## 2024-06-27 - 초기 언어 로드 시 불필요한 DOM 탐색 제거
 **Learning:** 초기 로드 시 요청된 언어가 HTML의 기본 언어(ko)와 동일한 경우, 모든 DOM 텍스트 노드를 탐색하고 치환하는 불필요한 작업을 생략하면 성능이 향상됨을 확인했습니다.
 **Action:** `isInitialDefault` 조건을 추가하여 초기 로드 시 불필요한 DOM 순회 코드가 실행되지 않도록 개선했습니다.
+## 2024-07-04 - Optimize rendering of long off-screen sections
+**Learning:** Using `content-visibility: auto` on elements that are off-screen significantly reduces rendering time, but without explicit intrinsic sizes, the browser miscalculates layout heights leading to severe scrollbar jumping.
+**Action:** Always pair `content-visibility: auto` with `contain-intrinsic-size` with a suitable fallback length (e.g., `contain-intrinsic-size: 600px;`) and an auto value (`contain-intrinsic-size: auto 600px;`) for newer browsers to ensure a smooth scrolling experience.
diff --git a/styles.css b/styles.css
index 3cca9f9..036308f 100644
--- a/styles.css
+++ b/styles.css
@@ -297,6 +297,10 @@ h1 {
 .section {
   padding: clamp(72px, 10vw, 132px) clamp(20px, 5vw, 72px);
   border-top: 1px solid var(--line);
+  /* ⚡ Bolt: Optimize rendering of off-screen sections */
+  content-visibility: auto;
+  contain-intrinsic-size: 600px;
+  contain-intrinsic-size: auto 600px;
 }
 
 .section-heading {