Beheben von Problemen aufgrund unerwarteter Änderungen an „container-type: inline-size' in Chrome

Chrome 129 führte eine Änderung im Verhalten von Containerabfragen ein, die sich auf Elemente mit Containertyp: Inline-Size auswirken. Diese Änderung ist zwar geringfügig, kann jedoch das Layout Ihrer Web-App beeinträchtigen. Ich werde durchgehen, was sich geändert hat, wie es sich zuvor verhalten hat und wie es sich ab Chrome 129 verhält.

Was hat sich geändert?

Vor Chrome 129, Containertyp: inline-size implizit:

1. Erstellt einen enthaltenden Block für absolut positionierte Elemente
2. Einen neuen Stapelkontext erstellt

Um dies zu veranschaulichen, betrachten Sie Folgendes:

  
    <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>
  

Vor Chrome 129 wurde der obige Code wie folgt gerendert:

Die untergeordneten Elemente des schwarz umrandeten .container-Div sind absolut positioniert. child-2 (das grüne Div) ist links positioniert: 0, richtet sich jedoch an den linken Grenzen des übergeordneten .container-Div aus. Dies liegt daran, dass in Chrome 128 und älter „container-type: inline-size“ implizit einen enthaltenden Block für absolut positionierte untergeordnete Elemente erstellt hat.

Darüber hinaus erstellt das Element „container-type: inline-size“ implizit einen neuen Stapelkontext, was dazu führt, dass Grün unten, Rot in der Mitte und Blau oben angezeigt wird.

Ab Chrome 129 werden jedoch dasselbe HTML und CSS wie folgt gerendert

Für die untergeordneten Elemente des .container-Elements wird kein enthaltender Block erstellt, und daher werden die absolut positionierten Elemente relativ zur Webseite und nicht relativ zu ihrem Container positioniert. Dies führt dazu, dass das grüne Quadrat den Container vollständig verlässt und die linke Seite der Webseite berührt.

Da außerdem kein neuer Stapelkontext erstellt wurde, hat sich die Reihenfolge geändert, in der die Kinder und Geschwister gestapelt werden. Das grüne Quadrat befindet sich immer noch unten, aber jetzt befindet sich das blaue Quadrat in der Mitte und das rote Quadrat oben.

Warum die Änderung?

Laut dem Chromium-Team im offiziellen Chromium-Bug-Tracker handelte es sich um eine absichtliche Änderung, um einen vom Team als Designfehler in der ursprünglichen Spezifikation angesehenen Fehler zu beheben.

Die Spezifikation selbst muss noch aktualisiert werden, aber das Team hat aufgrund einer Vereinbarung innerhalb der Arbeitsgruppe die Änderung am Browserverhalten vorgenommen, bevor Änderungen an der Spezifikation vorgenommen wurden.

Zum Zeitpunkt des Verfassens dieses Artikels (3. Oktober 2024) folgen alle anderen gängigen Browser (Firefox, Safari) immer noch dem Verhalten vor Chrome 129.

Abmilderung der Änderungen

Wenn Sie lediglich den Zustand vor Chrome 129 wiederherstellen möchten (und in der Zwischenzeit die Konsistenz aller Browser aufrechterhalten möchten, bis Firefox und Safari aktualisiert werden, um der Chrome-Implementierung zu folgen), können Sie einfach „contain: layout;“ hinzufügen. auf das Element mit dem Containertyp: inline-size;.

Wenn Sie das Verhalten des enthaltenden Blocks hinzufügen, aber keinen neuen Stapelkontext erstellen möchten, können Sie alternativ position: relative zum Container-Typ hinzufügen: inline-size; Element, das einen enthaltenden Block für untergeordnete Elemente erstellt, aber keinen neuen Stapelkontext erstellt. Dies führt jedoch zu unterschiedlichem Verhalten in verschiedenen Browsern, bis andere Browser aktualisiert werden, um dem Beispiel von Chrome zu folgen.

Probieren Sie es selbst aus

Unten ist ein CodePen, mit dem Sie spielen können und der zeigt, wovon ich oben spreche. Wenn Sie das Layout „contain:“ aus dem .container-Stil entfernen und Chrome 129 oder höher verwenden, wird das Layout wie im zweiten Bild angezeigt, das ich oben bereitgestellt habe. Wenn Sie den CodePen jedoch in Firefox 131 (aktuell zum Zeitpunkt des Schreibens) anzeigen, sollte er unabhängig davon, ob „container:“-Layout festgelegt ist oder nicht, dasselbe anzeigen.

Ich konnte diese Änderung in den Versionshinweisen für Chrome 129 nicht erwähnen, und wie bereits erwähnt, wurde diese Änderung vor einer Spezifikationsänderung vorgenommen, sodass wir wirklich überrascht wurden und das Layout erheblich durcheinander gebracht haben eine unserer Web-Apps. Ich hoffe, dass diese Informationen allen anderen helfen können, die die gleichen Probleme haben.

Das obige ist der detaillierte Inhalt vonBeheben von Problemen aufgrund unerwarteter Änderungen an „container-type: inline-size' in Chrome. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!