소개 페이지 5단계 감사 — 실렌더에서 결함 3건
정적 검사로는 안 잡히고 320px 실렌더에서만 나온 것들이다. 발견 내용은 페이지의 프리플라이트 로그 섹션에 그대로 실었다. 1. 320px 가로 오버플로 13px 표를 overflow 컨테이너로 감쌌는데도 넘쳤다. grid item 의 기본 min-width 가 auto 라 콘텐츠가 부모를 밀어낸다. min-width:0 이 있어야 overflow-x 가 실제로 작동한다. 2. 다크 밴드 버튼 대비 2.88:1 (기준 4.5:1) 밴드가 --accent 만 반전시키고 --accent-ink 는 흰색으로 뒀다. --accent-ink-inverse 토큰을 추가해 함께 반전시킨다. 6.21:1 로 회복. 3. 파이프라인 6단계 중 뒤 3개가 영영 opacity 0 ← 가장 심각 animation-range 의 cover 22% 에 페이지 하단 요소는 도달하지 못한다. 스크롤을 끝까지 내려도 이 페이지의 본체가 절반 사라진 상태였다. 이펙트를 끄면 보이지만 켜면 사라지는 것은 폴백이 있는 것과 다르다. 스크롤 진입 연출을 제거했다. 남은 모션은 호버·포커스뿐이다. 하드 게이트 12/12 전부 통과 (8개 정적 + 4개 실렌더). 실렌더 대비 최저 6.21:1, AA 미달 0건.
This commit is contained in:
parent
6103700d38
commit
6e05e69ca4
7 changed files with 61 additions and 36 deletions
|
|
@ -22,6 +22,7 @@
|
|||
--accent: #0E6B63; /* 딥 틸. 대비 6.04:1 */
|
||||
--accent-ink: #FFFFFF; /* 강조 위 글자. 6.36:1 */
|
||||
--accent-inverse: #3FA89D; /* 밴드 위 강조. 6.30:1 */
|
||||
--accent-ink-inverse: #0B1A18; /* 밴드 위 강조 위의 글자. 6.43:1 */
|
||||
|
||||
/* ---- 형태: radius 2종 (게이트 #3) ------------------------ */
|
||||
--radius-sm: 3px; /* 버튼·입력·배지 */
|
||||
|
|
@ -65,6 +66,7 @@
|
|||
--accent: #3FA89D; /* 6.30:1 */
|
||||
--accent-ink: #0B1A18; /* 6.21:1 */
|
||||
--accent-inverse: #0E6B63;
|
||||
--accent-ink-inverse: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -119,6 +121,7 @@
|
|||
--ink-muted: var(--ink-muted-inverse);
|
||||
--line: var(--line-inverse);
|
||||
--accent: var(--accent-inverse);
|
||||
--accent-ink: var(--accent-ink-inverse);
|
||||
background: var(--surface);
|
||||
color: var(--ink);
|
||||
padding-block: var(--space-8);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue