Có sự cố trong Google Chrome nơi các thành phần mở rộng/thu gọn theo các hướng khác nhau liên quan đến chế độ xem khi được đặt bên trong hộp chứa flexbox với một mục liền kề flex có space-between hoặc center nội dung hợp lý .Google Chrome xem hướng mở rộng theo hướng với flexbox
Đây không phải là vấn đề trong Firefox, IE11, Edge hoặc Safari vì các phần tử luôn mở rộng xuống dưới.
tôi tò mò: Hành vi
- Liệu Chrome ở đây theo một số spec? Nếu vậy thì cái nào?
- Nếu không, vậy tại sao điều này lại được thực hiện trong Chrome? (IMHO, đó là UX khủng khiếp cho trình kích hoạt nhấp để biến mất một cách ngẫu nhiên.)
- Hành vi của Chrome có thể bị sửa đổi hoặc vô hiệu hóa một cách nào đó không? Ví dụ. thông qua CSS hoặc meta-tag?
Cập nhật 1: Tôi đã nộp issue #739860 on chromium bug tracker tìm kiếm thông tin chi tiết/giải thích từ nhà phát triển Chromium, nếu có thể.
Dưới đây là hai ví dụ được chèn bên dưới. Bộ thử nghiệm đầy đủ mô tả vấn đề có thể được tìm thấy trong bút này: https://codepen.io/jameswilson/full/xrpRPg/ Tôi đã chọn sử dụng slideToggle trong ví dụ này để chuyển động mở rộng/thu gọn được làm động và hiển thị cho mắt. Hành vi tương tự cũng xảy ra với thẻ chi tiết, nhưng hỗ trợ qua trình duyệt vẫn chưa có, và việc mở rộng/thu gọn quá chật chội.
Ex 1: Chrome mở rộng/hành vi sụp đổ cho không gian giữa flexbox lý
$('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: mở rộng/thu hẹp hành vi của Chrome dành cho trung tâm lý 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>
Âm thanh như thực hiện thời gian gần đây [cuộn neo] (https://github.com/WICG/ScrollAnchoring/blob/master/explainer .md) tính năng. Như bạn có thể thấy nó là posisble để chọn không tham gia thông qua 'overflow-anchor: none' trên vùng chứa hoặc tài liệu. – wOxxOm
@wOxxOm ++ bạn chính xác. Việc thêm 'overflow-anchor: none' vào' .flexcontainer' sẽ khắc phục sự cố. Nếu bạn chuyển đổi nó thành câu trả lời, tôi sẽ trao cho bạn các điểm. Ngoài ra bạn có đến đây thông qua lỗi được lưu trên trình theo dõi crom không? – JamesWilson
Không, không cần điểm cho một cái gì đó rất đơn giản, cũng vâng tôi đã đến từ trình theo dõi lỗi. – wOxxOm