Google Chrome verwendet das Flexbox-Ansichtsfenster, um die Erweiterungsrichtung zu verankern

Question

Es gibt ein Problem in Google Chrome, bei dem ein Element in einem Flexbox-Container platziert wird, der angrenzende Flex-Elemente mit Leerzeichen enthält. code>center richtet den Inhalt in verschiedenen Richtungen relativ zum Ansichtsfenster aus.

In Firefox, IE11, Edge oder Safari stellt dies kein Problem dar, da Elemente immer nach unten erweitert werden.

Ich bin neugierig:

• Verhält sich Chrome gemäß bestimmten Spezifikationen? Wenn ja, welcher?
• Wenn nicht, warum sollten Sie es in Chrome tun? (Meiner Meinung nach ist das Klicken auf einen Auslöser, der zufällig vom Bildschirm verschwindet, eine schreckliche Benutzererfahrung.)
• Ist es möglich, das Verhalten von Chrome auf irgendeine Weise zu ändern oder zu deaktivieren? Zum Beispiel. Über CSS oder Meta-Tags?

Update 1: Wenn möglich, habe ich Problem Nr. 739860 im Chromium-Bug-Tracker eingereicht, um Einblicke/Erklärungen von den Chromium-Entwicklern zu erhalten.

---

Zwei Beispiele sind unten eingefügt. Die vollständige Testsuite, die das Problem beschreibt, finden Sie mit diesem Stift: https://codepen.io/jameswilson/full/xrpRPg/ Ich habe mich in diesem Beispiel für die Verwendung von SlipToggle entschieden, damit die Entfaltungs-/Faltbewegung animiert und auffällig ist. Das gleiche Verhalten tritt auf der Registerkarte „Details“ auf, es gibt jedoch noch keine browserübergreifende Unterstützung und das Erweitern/Reduzieren ist zu umständlich.

示例 1:Chrome 针对对齐 Flexbox 之间的空格的展开/折叠行为

$('button').click(function() {
  $(this).next().slideToggle();
})

body {
  Rand: 30px;
  Schriftfamilie: serifenlos;
}
beiseite,
beiseite div,
Zusammenfassung,
hauptsächlich,
Taste,
Details p,
Taste + p {
  Hintergrund: rgba(0,0,0,.09);
  Grenze: keine;
  Polsterung: 20px;
  Rand: 0;
}

.flexcontainer {
  Anzeige: Flex;
}
beiseite {
  Flex: 1;
  Position: relativ;
  maximale Breite: 25 %;
  Hintergrund: Minzcreme;

  Anzeige: Flex;
  Flexrichtung: Spalte;
  Position: relativ;
}
aside.space-between {
  justify-content: Leerzeichen dazwischen;
}
aside.center {
  rechtfertigen-Inhalt: Mitte;
}

hauptsächlich {
  Flex: 3;
  Position: relativ;
  maximale Breite: 75 %;
  Hintergrund: aliceblue;
  vertikal ausrichten: oben;
  Höhe: 100 %;
}
Haupt > * + * {
  Rand oben: 20px;
}

Taste + p {
  Anzeige: keine;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> ;</script>

<section class="flexcontainer">
  <aside class="space-between">
    <div>Obere Seitenleiste</div>
    <div>Untere Seitenleiste</div>
  </beiseite>
  <Haupt>
    <div>
      <button>slideToggle</button>
      <p>Andere Browser: Wird immer nach unten erweitert.<br>
        Chrome: Sollte immer nach unten erweitert werden, da die obere Seitenleiste immer sichtbar ist.</p>
    </div>

    <div>
      <button>slideToggle (wird normalerweise nach unten erweitert)</button>
      <p>Andere Browser: Wird immer nach unten erweitert.<br>
        Chrome: Sollte nach unten erweitert werden, während die untere und obere Seitenleiste sichtbar sind. Wird jedoch nach oben erweitert, wenn Sie weit genug nach unten scrollen, sodass die obere Seitenleiste nicht mehr auf dem Bildschirm angezeigt wird.</p>
    </div>
    
    <div>
      <button>slideToggle (wird normalerweise nach unten erweitert)</button>
      <p>Andere Browser: Wird immer nach unten erweitert.<br>
        Chrome: Sollte nach unten erweitert werden, während die untere und obere Seitenleiste sichtbar sind. Wird jedoch nach oben erweitert, wenn Sie weit genug nach unten scrollen, sodass die obere Seitenleiste nicht mehr auf dem Bildschirm angezeigt wird.</p>
    </div>
  </main>
</section>

示例 2:Chrome 对居中对齐的 Flexbox 的展开/折叠行为

$('button').click(function() {
  $(this).next().slideToggle();
})

body {
  Rand: 30px;
  Schriftfamilie: serifenlos;
}
beiseite,
beiseite div,
Zusammenfassung,
hauptsächlich,
Taste,
Details p,
Taste + p {
  Hintergrund: rgba(0,0,0,.09);
  Grenze: keine;
  Polsterung: 20px;
  Rand: 0;
}

.flexcontainer {
  Anzeige: Flex;
}
beiseite {
  Flex: 1;
  Position: relativ;
  maximale Breite: 25 %;
  Hintergrund: Minzcreme;

  Anzeige: Flex;
  Flexrichtung: Spalte;
  Position: relativ;
}
aside.space-between {
  rechtfertigen-Inhalt: Leerzeichen-zwischen;
}
aside.center {
  rechtfertigen-Inhalt: Mitte;
}

hauptsächlich {
  Flex: 3;
  Position: relativ;
  maximale Breite: 75 %;
  Hintergrund: aliceblue;
  vertikal ausrichten: oben;
  Höhe: 100 %;
}
Haupt > * + * {
  Rand oben: 20px;
}

Taste + p {
  Anzeige: keine;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> ;</script>
<section class="flexcontainer">
  <aside class="center">
    <div>Mitte Seitenleiste</div>
  </beiseite>
  <Haupt>

    <div>
      <button>slideToggle (wird normalerweise nach unten erweitert)</button>
      <p>Andere Browser: Wird immer nach unten erweitert.<br>
        Chrome: Erweitert sich normalerweise nach unten. Wird in beide Richtungen erweitert, wenn die Oberkante des Containers aus dem Ansichtsfenster herausscrollt.</p>
    </div>

    <div>
      <button>slideToggle</button>
      <p>Andere Browser: Wird immer nach unten erweitert.<br>
        Chrome: Erweitert sich normalerweise nach unten. Wird in beide Richtungen erweitert, wenn die Oberkante des Containers aus dem Ansichtsfenster herausscrollt.</p>
    </div>

    <div>
      <button>slideToggle (wird normalerweise nach unten erweitert)</button>
      <p>Andere Browser: Wird immer nach unten erweitert.<br>
        Chrome: Erweitert sich normalerweise nach unten. Wird in beide Richtungen erweitert, wenn der obere Rand des Containers aus dem Ansichtsfenster herausscrollt, wird aber dann wieder nach unten erweitert, wenn die mittlere Seitenleiste aus dem Ansichtsfenster herausscrollt.</p>
    </div>
  </main>
</section>

Answer 1

将此代码添加到您的 Flex 容器中：

• 溢出锚：无

这将禁用 Chrome 中称为“滚动锚定”的功能，该功能会导致框向上扩展 (修订的代码笔）。

---

在 Chrome 中，展开框的向上/向下方向由视口中的滚动位置决定，而不是布局本身。

为了改善用户体验，Chrome 针对这种行为采取了独特的方法。

基本上，它们将 DOM 元素绑定到当前滚动位置。屏幕上这个特定（“锚点”）元素的移动将确定对滚动位置的调整（如果有）。

他们将这种方法称为“滚动锚定”。该算法在此页面上进行了解释： https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md

此行为目前是 Chrome 独有的，但Google 正在推动标准化。

根据滚动锚定文档，将 overflow-anchor: none 应用到适当的元素将禁用滚动锚定调整。

更多信息：

• https://github.com/WICG/ScrollAnchoring/blob/master/解释器.md
• https://bugs.chromium.org/p/chromium/问题/详细信息？id=739860
• https://hacks.mozilla.org/2019 /03/scroll-anchoring-in-firefox-66/
• 更改 CSS 弹性顺序会导致滚动