साथ दिशा गूगल क्रोम में एक मुद्दा जहां तत्वों का विस्तार व्यूपोर्ट के सापेक्ष अलग अलग दिशाओं में/संक्षिप्त करें जब एक आसन्न फ्लेक्स आइटम होने space-between या center उचित सामग्री के साथ एक flexbox कंटेनर के अंदर रखा है विस्तार ।गूगल क्रोम व्यूपोर्ट-लंगर डाले flexbox
यह फ़ायरफ़ॉक्स, आईई 11, एज, या सफारी में कोई समस्या नहीं है क्योंकि तत्व हमेशा नीचे की ओर बढ़ते हैं।
मैं उत्सुक हूँ:
- करता है क्रोम के व्यवहार यहाँ कुछ कल्पना का पालन करें? यदि हां, तो कौन सा?
- यदि नहीं, तो यह क्रोम में क्यों किया गया था? (आईएमएचओ, यह क्लिक ट्रिगर के लिए यादृच्छिक रूप से ऑफस्क्रीन गायब होने के लिए भयानक यूएक्स है।)
- क्या क्रोम का व्यवहार किसी भी समय संशोधित या अक्षम किया जा सकता है? उदाहरण के लिए। सीएसएस या मेटा टैग के माध्यम से?
अद्यतन 1: मैं issue #739860 on chromium bug tracker दायर किया है, क्रोमियम devs से अंतर्दृष्टि/स्पष्टीकरण की मांग यदि संभव हो तो।
यहां दो उदाहरण नीचे दिए गए हैं। समस्या का वर्णन करने वाला पूर्ण परीक्षण सूट इस पेन में पाया जा सकता है: https://codepen.io/jameswilson/full/xrpRPg/ मैंने इस उदाहरण में स्लाइड टॉगल का उपयोग करना चुना है ताकि विस्तार/पतन गति एनिमेटेड हो और आंखों को दिखाई दे। विवरण टैग के साथ एक ही व्यवहार होता है, लेकिन क्रॉस-ब्राउज़र समर्थन अभी तक नहीं है, और विस्तार/पतन बहुत जंकी है।
पूर्व 1: Chrome की उचित 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>पूर्व 2 के लिए विस्तृत/संक्षिप्त व्यवहार: Chrome की विस्तृत/संक्षिप्त करें केंद्र के लिए व्यवहार को सही ठहराया फ्लेक्सबॉक्स
$('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>
हाल ही में लागू [पुस्तक प्रस्तोता] की तरह लगता है (https://github.com/WICG/ScrollAnchoring/blob/master/explainer एमएम) सुविधा। जैसा कि आप कंटेनर या दस्तावेज़ निकाय पर 'ओवरफ्लो-एंकर: कोई नहीं' के माध्यम से ऑप्ट आउट करने के लिए सकारात्मक दिख सकते हैं। – wOxxOm
@wOxxOm ++ आप बिल्कुल सही हैं। 'ओवरफ्लो-एंकर' को जोड़ना: 'फ्लेक्सकॉन्टेनर' में कोई भी नहीं समस्या को हल करता है। यदि आप इसे किसी उत्तर में परिवर्तित करते हैं तो मैं आपको अंक प्रदान करूंगा। क्रोमियम ट्रैकर पर दायर बग के माध्यम से आप यहां आए थे? – JamesWilson
नहीं, कुछ आसान के लिए अंक की आवश्यकता नहीं है, हाँ भी मैं बग ट्रैकर से आया था। – wOxxOm