istnieje problem w Google Chrome, gdzie elementy rozwinąć/zwinąć w różnych kierunkach względem rzutni, gdy umieszczone wewnątrz kontenera schematu flexbox ze związkiem sąsiedztwie elastyczny element mający space-between lub center uzasadnioną treść .Google Chrome rzutnia zakotwiczone poszerzyć kierunek ze schematu flexbox
To nie jest problem w przeglądarkach Firefox, IE11, Edge lub Safari, ponieważ elementy zawsze rozszerzają się w dół.
jestem ciekaw: zachowanie
- robi Chrome tutaj przestrzegać pewnych specyfikację? Jeśli tak, to jaki?
- Jeśli nie, to dlaczego to zrobiono w Chrome? (IMHO, to straszny UX, że spust kliknięć zniknie z ekranu losowo.)
- Czy zachowanie Chrome może być w jakiś sposób zmodyfikowane lub wyłączone? Na przykład. przez CSS lub metatag?
Aktualizacja 1: Zgłosiłem issue #739860 on chromium bug tracker szukając wglądu/wyjaśnienia od twórców Chromium, jeśli to możliwe.
Oto dwa przykłady wstawione poniżej. Pełny pakiet testowy opisujący problem można znaleźć w tym piórze: https://codepen.io/jameswilson/full/xrpRPg/ W tym przykładzie zdecydowałem się użyć slideToggle, aby ruch rozwijania/zwijania był animowany i widoczny dla oczu. To samo zachowanie dzieje się ze znacznikiem szczegółów, ale obsługa wielu przeglądarek nie jest jeszcze dostępna, a funkcja rozwijania/zwijania jest zbyt porywcza.
Ex 1: Chrome rozwinąć/zachowanie na zapadnięcie na przestrzeń pomiędzy uzasadnionym schematu flexbox
$('button').click(function() {
$(this).next().slideToggle();
})body {
margin: 30px;
font-family: sans-serif;
}
aside,
aside div,
summary,
main,
button,
details p,
button + p {
background: rgba(0,0,0,.09);
border: none;
padding: 20px;
margin: 0;
}
.flexcontainer {
display: flex;
}
aside {
flex: 1;
position: relative;
max-width: 25%;
background: mintcream;
display: flex;
flex-direction: column;
position: relative;
}
aside.space-between {
justify-content: space-between;
}
aside.center {
justify-content: center;
}
main {
flex: 3;
position: relative;
max-width: 75%;
background: aliceblue;
vertical-align: top;
height: 100%;
}
main > * + * {
margin-top: 20px;
}
button + p {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="flexcontainer">
<aside class="space-between">
<div>Top Sidebar</div>
<div>Bottom Sidebar</div>
</aside>
<main>
<div>
<button>slideToggle</button>
<p>Other browsers: always expands downward.<br>
Chrome: Should always expand downward because Top Sidebar is always visible.</p>
</div>
<div>
<button>slideToggle (usually expands down)</button>
<p>Other browsers: always expands downward.<br>
Chrome: Should expand downward while Bottom Sidebar and Top Sidebar are both visible. But will expand upward if you scroll down far enough so that Top Sidebar is off-screen.</p>
</div>
<div>
<button>slideToggle (usually expands down)</button>
<p>Other browsers: always expands downward.<br>
Chrome: Should expand downward while Bottom Sidebar and Top Sidebar are both visible. But will expand upward if you scroll down far enough so that Top Sidebar is off-screen.</p>
</div>
</main>
</section>Ex 2: expand/zachowanie upadek Chrome dla centrum uzasadnione Flexbox
$('button').click(function() {
$(this).next().slideToggle();
})body {
margin: 30px;
font-family: sans-serif;
}
aside,
aside div,
summary,
main,
button,
details p,
button + p {
background: rgba(0,0,0,.09);
border: none;
padding: 20px;
margin: 0;
}
.flexcontainer {
display: flex;
}
aside {
flex: 1;
position: relative;
max-width: 25%;
background: mintcream;
display: flex;
flex-direction: column;
position: relative;
}
aside.space-between {
justify-content: space-between;
}
aside.center {
justify-content: center;
}
main {
flex: 3;
position: relative;
max-width: 75%;
background: aliceblue;
vertical-align: top;
height: 100%;
}
main > * + * {
margin-top: 20px;
}
button + p {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="flexcontainer">
<aside class="center">
<div>Center Sidebar</div>
</aside>
<main>
<div>
<button>slideToggle (usually expands downwards)</button>
<p>Other browsers: always expands downward.<br>
Chrome: Usually expands downwards. Expands in both directions when the top-edge of the container scrolls out of the viewport.</p>
</div>
<div>
<button>slideToggle</button>
<p>Other browsers: always expands downward.<br>
Chrome: Usually expands downwards. Expands in both directions when the top-edge of the container scrolls out of the viewport.</p>
</div>
<div>
<button>slideToggle (usually expands downwards)</button>
<p>Other browsers: always expands downward.<br>
Chrome: Usually expands downwards. Expands in both directions when the top-edge of the container scrolls out of the viewport, but then resumes expanding downwards again when Center Sidebar scrolls out of view.</p>
</div>
</main>
</section>
Brzmi jak niedawno wdrożonego [Scroll kotwienia] (https://github.com/WICG/ScrollAnchoring/blob/master/explainer .md) funkcja. Jak widać, możliwe jest zrezygnowanie przez 'przepełnienie-kotwica: none' na kontenerze lub treści dokumentu. – wOxxOm
@wOxxOm ++ masz dokładnie rację. Dodanie 'przepełnienia-anchor: none' do' .flexcontainer' rozwiązuje problem. Jeśli skonwertujesz to na odpowiedź, przyznam ci punkty. Czy przyszedłeś tu również z powodu błędu z Chromeer? – JamesWilson
Nie, nie potrzebuję punktów za coś tak prostego, również tak, przyszedłem z modułu do śledzenia błędów. – wOxxOm