Chrome에서 'container-type: inline-size'에 대한 예기치 않은 변경으로 인한 문제 해결

Chrome 129에서는 컨테이너 유형: 인라인 크기의 요소에 영향을 미치는 컨테이너 쿼리 동작이 변경되었습니다. 이 변경 사항은 작지만 웹 앱의 레이아웃을 손상시킬 가능성이 있습니다. 변경된 사항, 이전에는 어떻게 작동했는지, Chrome 129부터 어떻게 작동하는지 살펴보겠습니다.

무엇이 바뀌었나요?

Chrome 129 이전에는 컨테이너 유형: 인라인 크기가 암시적으로:

1. 절대 위치에 있는 요소에 대한 포함 블록 생성
2. 새로운 스태킹 컨텍스트 확립

이를 설명하려면 다음을 고려하세요.

  
    <style>
      .container {
        container-type: inline-size;
        width: 300px;
        height: 300px;
        border: 2px solid black;
        padding: 1rem;
        margin: 2rem;
        contain: layout;
      }

      .child,
      .sibling {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
      }

      .child {
        width: 200px;
        height: 200px;
      }

      .child-1 {
        background-color: rgba(255, 0, 0, 0.7);
        top: 100px;
        left: 100px;
        z-index: 2;
      }

      .child-2 {
        background-color: rgba(0, 255, 0, 0.7);
        top: 30px;
        left: 0;
        z-index: 1;
      }

      .sibling {
        width: 150px;
        height: 150px;
        background-color: rgba(0, 0, 255, 0.7);
        top: 165px;
        left: 50px;
        z-index: 1;
      }
    </style>
  
  
    <div class="container">
      <div class="child child-1">Child 1 (z-index: 2)</div>
      <div class="child child-2">Child 2 (z-index: 1)</div>
    </div>
    <div class="sibling">Sibling (z-index: 1)</div>
  

Chrome 129 이전에는 위 코드가 다음과 같이 렌더링되었습니다.

검은색 테두리가 있는 .container div의 하위 항목은 절대 위치에 있습니다. child-2(녹색 div)는 왼쪽: 0에 위치하지만 상위 .container div의 왼쪽 경계에 맞춰 정렬됩니다. 이는 Chrome 128 이하 버전에서는 컨테이너 유형: 인라인 크기가 절대 위치 하위 항목에 대한 포함 블록을 암시적으로 생성했기 때문입니다.

또한, 컨테이너 유형: 인라인 크기 요소는 암시적으로 새로운 스택 컨텍스트를 생성하여 녹색이 하단에, 빨간색이 중간에, 파란색이 상단에 표시됩니다.

그러나 Chrome 129부터는 동일한 HTML과 CSS가 이렇게 렌더링됩니다.

.container 요소의 하위 항목에 대해 포함 블록이 생성되지 않으므로 절대 위치에 있는 요소는 해당 컨테이너가 아닌 웹 페이지를 기준으로 배치됩니다. 그 결과 녹색 사각형이 컨테이너에서 완전히 벗어나 웹페이지 왼쪽에 닿게 됩니다.

추가로 새로운 스택 컨텍스트가 생성되지 않았기 때문에 자식 및 형제 스택 순서가 변경되었습니다. 녹색 사각형은 여전히 ​​아래쪽에 있지만 이제 파란색 사각형이 중앙에 있고 빨간색 사각형이 위쪽에 있습니다.

변화하는 이유는 무엇입니까?

공식 Chromium 버그 추적기의 Chromium 팀에 따르면 이는 팀이 원래 사양의 설계 실수로 간주하는 부분을 수정하기 위한 의도적인 변경이었습니다.

사양 자체는 아직 업데이트되지 않았지만, 작업 그룹 내 합의로 인해 사양이 변경되기 전에 팀에서 브라우저 동작을 변경했습니다.

이 기사를 작성하는 시점(2024년 10월 3일) 현재, 다른 모든 주요 브라우저(Firefox, Safari)는 여전히 Chrome 129 이전 동작을 따르고 있습니다.

변경 사항 완화

Chrome 129 이전 상태로 복원하려는 경우(그 동안 Firefox 및 Safari가 Chrome 구현을 따르도록 업데이트될 때까지 브라우저 간 일관성을 유지함) 간단히 include: 레이아웃을 추가하면 됩니다. 컨테이너 유형: 인라인 크기;를 갖는 요소에.

컨테이닝 블록 동작을 추가하고 싶지만 새 스태킹 컨텍스트를 생성하지 않으려는 경우 대신에 컨테이너 유형에 상대적인 위치: 인라인 크기를 추가할 수 있습니다. 자식 요소에 대한 포함 블록을 생성하지만 새 스택 컨텍스트를 생성하지 않는 요소입니다. 그러나 이로 인해 다른 브라우저가 Chrome의 지침을 따르도록 업데이트될 때까지 다른 브라우저에서 다른 동작이 발생합니다.

직접 시도해 보세요

다음은 제가 위에서 말하는 내용을 보여주는 CodePen입니다. .container 스타일에서 contain: 레이아웃을 제거하고 Chrome 129 이상을 사용하는 경우 위에 제공한 두 번째 이미지와 같이 레이아웃이 표시됩니다. 그러나 Firefox 131(작성 당시 최신)에서 CodePen을 보는 경우에는 contain: 레이아웃 설정 여부에 관계없이 동일하게 표시되어야 합니다.

Chrome 129 릴리스 노트에서는 이 변경 사항에 대한 언급을 찾을 수 없었으며, 이미 언급했듯이 이 변경 사항은 사양 변경보다 먼저 이루어졌기 때문에 우리를 당황하게 만들었고 레이아웃이 크게 손상되었습니다. 우리의 웹 앱 중 하나입니다. 이 정보가 같은 문제를 겪고 있는 다른 사람에게 도움이 되기를 바랍니다.

위 내용은 Chrome에서 'container-type: inline-size'에 대한 예기치 않은 변경으로 인한 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!