Google Chrome verwendet das Flexbox-Ansichtsfenster, um die Erweiterungsrichtung zu verankern
<p>Es gibt ein Problem in Google Chrome, bei dem ein Element in einem Flexbox-Container platziert wird, der <em>angrenzende</em> Flex-Elemente mit <code>Leerzeichen</code Expand/collapse> enthält. code>center</code> richtet den Inhalt in verschiedenen Richtungen relativ zum Ansichtsfenster aus. </p>
<p>In Firefox, IE11, Edge oder Safari stellt dies kein Problem dar, da Elemente immer nach unten erweitert werden. </p>
<p>Ich bin neugierig:</p>
<ul>
<li>Verhält sich Chrome gemäß bestimmten Spezifikationen? Wenn ja, welcher? </li>
<li>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.) </li>
<li>Ist es möglich, das Verhalten von Chrome auf irgendeine Weise zu ändern oder zu deaktivieren? Zum Beispiel. Über CSS oder Meta-Tags? </li>
</ul>
<p><strong>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. </strong></p>
<hr>
<p>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.</p>
<p><strong>示例 1:Chrome 针对对齐 Flexbox 之间的空格的展开/折叠行为</strong></p>
<p>
<pre class="brush:js;toolbar:false;">$('button').click(function() {
$(this).next().slideToggle();
})</pre>
<pre class="brush:css;toolbar:false;">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;
}</pre>
<pre class="brush:html;toolbar:false;"><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></pre>
</p>
<p><strong>示例 2:Chrome 对居中对齐的 Flexbox 的展开/折叠行为</strong></p>
<p>
<pre class="brush:js;toolbar:false;">$('button').click(function() {
$(this).next().slideToggle();
})</pre>
<pre class="brush:css;toolbar:false;">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;
}</pre>
<pre class="brush:html;toolbar:false;"><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></pre>
</p>
