레이어가 분리되는 확실한 경우

• translate3d,translateZ 등 3D 변환
• will-change: transform | opacity | filter
• filter,backdrop-filter,mix-blend-mode,clip-path
• 실제 값이 변하는opacity/transform 애니메이션·트랜지션

분리되지 않는 기본 케이스

• 정적opacity
• 값이 1인scale,rotate
• width,height,background-color 등 레이아웃·페인트 속성
• 합성과 무관한will-change (예:will-change: width)

애매한 케이스

• 정적opacity만 있을 때: 레이어 X
• 정적opacity +translateZ 형제: 레이어 O가 될 수 있음 (스쿼싱 해제)
• 정적opacity +will-change: opacity: 레이어 O (직접 승격 선언)
• 스코프가contain: paint/isolation: isolate로 분리되면 외부 승격 영향 차단

DevTools 확인 방법

ChromeLayers 패널에서 레이어 구성 확인.

실험팁

• 각 시나리오를 격리된 스코프(contain: layout paint)로 나눠서 비교.
• 카드에Layer O / X / ? 표기 + “DevTools에서 확인” 안내.
• 애니메이션, will-change, 강한 합성 트리거를 조합한 예제를 분리해 보여줄 것.

실제예제:airman5573/fe-20s-interview#377