Google Chrome menggunakan port pandangan Flexbox untuk menambat arah pengembangan

Question

Terdapat isu dalam Google Chrome apabila elemen diletakkan di dalam bekas Flexbox yang mempunyai bersebelahan item Flex dengan ruang kod>pusat selaraskan kandungan dalam arah yang berbeza berbanding dengan port pandangan.

Ini bukan masalah dalam Firefox, IE11, Edge atau Safari kerana elemen sentiasa berkembang ke bawah.

Saya ingin tahu:

• Adakah Chrome berkelakuan mengikut spesifikasi tertentu? Jika ya, yang mana satu?
• Jika tidak, mengapa anda melakukannya dalam Chrome? (IMHO, mengklik pencetus yang hilang secara rawak di luar skrin adalah pengalaman pengguna yang mengerikan.)
• Adakah mungkin untuk mengubah suai atau melumpuhkan kelakuan Chrome dalam beberapa cara? Sebagai contoh. Melalui CSS atau tag meta?

Kemas kini 1: Jika boleh, saya telah menyerahkan isu #739860 pada penjejak pepijat kromium untuk mendapatkan cerapan/penjelasan daripada pembangun Chromium.

---

Dua contoh disisipkan di bawah. Suite ujian penuh yang menerangkan masalah boleh didapati dengan pen ini: https://codepen.io/jameswilson/full/xrpRPg/ Saya memilih untuk menggunakan slipToggle dalam contoh ini supaya pergerakan terungkap/lipat adalah animasi dan menarik perhatian. Tingkah laku yang sama berlaku dengan tab butiran, tetapi tiada sokongan silang penyemak imbas lagi, dan kembangkan/runtuhkan terlalu jantan.

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

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

body {
  jidar: 30px;
  font-family: sans-serif;
}
diketepikan,
mengetepikan div,
ringkasan,
utama,
butang,
butiran p,
butang + p {
  latar belakang: rgba(0,0,0,.09);
  sempadan: tiada;
  padding: 20px;
  margin: 0;
}

.flexcontainer {
  paparan: flex;
}
ketepikan {
  lentur: 1;
  kedudukan: relatif;
  lebar maksimum: 25%;
  latar belakang: pudina;

  paparan: flex;
  flex-direction: lajur;
  kedudukan: relatif;
}
aside.space-antara {
  justify-content: ruang-antara;
}
aside.center {
  justify-content: pusat;
}

utama {
  lentur: 3;
  kedudukan: relatif;
  lebar maksimum: 75%;
  latar belakang: aliceblue;
  vertical-align: atas;
  ketinggian: 100%;
}
utama > * + * {
  jidar atas: 20px;
}

butang + p {
  paparan: tiada;
}

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

<section class="flexcontainer">
  <aside class="space-between">
    <div>Bar Sisi Atas</div>
    <div>Bar Sisi Bawah</div>
  </ketepikan>
  <utama>
    <div>
      <butang>slideToggle</button>
      <p>Pelayar lain: sentiasa mengembang ke bawah.<br>
        Chrome: Harus sentiasa berkembang ke bawah kerana Bar Sisi Atas sentiasa kelihatan.</p>
    </div>

    <div>
      <butang>slideTogol (biasanya mengembang ke bawah)</button>
      <p>Pelayar lain: sentiasa mengembang ke bawah.<br>
        Chrome: Harus berkembang ke bawah manakala Bar Sisi Bawah dan Bar Sisi Atas kedua-duanya kelihatan. Tetapi akan berkembang ke atas jika anda menatal ke bawah dengan cukup jauh supaya Bar Sisi Atas berada di luar skrin.</p>
    </div>
    
    <div>
      <butang>slideTogol (biasanya mengembang ke bawah)</button>
      <p>Pelayar lain: sentiasa mengembang ke bawah.<br>
        Chrome: Harus berkembang ke bawah manakala Bar Sisi Bawah dan Bar Sisi Atas kedua-duanya kelihatan. Tetapi akan berkembang ke atas jika anda menatal ke bawah dengan cukup jauh supaya Bar Sisi Atas berada di luar skrin.</p>
    </div>
  </utama>
</section>

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

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

body {
  jidar: 30px;
  font-family: sans-serif;
}
diketepikan,
mengetepikan div,
ringkasan,
utama,
butang,
butiran p,
butang + p {
  latar belakang: rgba(0,0,0,.09);
  sempadan: tiada;
  padding: 20px;
  margin: 0;
}

.flexcontainer {
  paparan: flex;
}
ketepikan {
  lentur: 1;
  kedudukan: relatif;
  lebar maksimum: 25%;
  latar belakang: pudina;

  paparan: flex;
  flex-direction: lajur;
  kedudukan: relatif;
}
aside.space-antara {
  justify-content: ruang-antara;
}
aside.center {
  justify-content: pusat;
}

utama {
  lentur: 3;
  kedudukan: relatif;
  lebar maksimum: 75%;
  latar belakang: aliceblue;
  vertical-align: atas;
  ketinggian: 100%;
}
utama > * + * {
  jidar atas: 20px;
}

butang + p {
  paparan: tiada;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> ;</skrip>
<section class="flexcontainer">
  <tepikan class="center">
    <div>Bar Sisi Tengah</div>
  </ketepikan>
  <utama>

    <div>
      <butang>slideTogol (biasanya mengembang ke bawah)</button>
      <p>Pelayar lain: sentiasa mengembang ke bawah.<br>
        Chrome: Biasanya mengembang ke bawah. Berkembang dalam kedua-dua arah apabila bahagian tepi atas bekas menatal keluar dari port pandangan.</p>
    </div>

    <div>
      <butang>slideToggle</button>
      <p>Pelayar lain: sentiasa mengembang ke bawah.<br>
        Chrome: Biasanya mengembang ke bawah. Berkembang dalam kedua-dua arah apabila bahagian tepi atas bekas menatal keluar dari port pandangan.</p>
    </div>

    <div>
      <butang>slideTogol (biasanya mengembang ke bawah)</button>
      <p>Pelayar lain: sentiasa mengembang ke bawah.<br>
        Chrome: Biasanya mengembang ke bawah. Berkembang dalam kedua-dua arah apabila bahagian tepi atas bekas menatal keluar dari port pandangan, tetapi kemudian meneruskan pengembangan ke bawah sekali lagi apabila Bar Sisi Tengah menatal keluar dari paparan.</p>
    </div>
  </utama>
</section>

Answer 1

Tambahkan kod ini pada bekas Flex anda:

• 溢出锚：无

Ini akan melumpuhkan ciri dalam Chrome yang dipanggil "menambat tatal" yang menyebabkan kotak mengembang ke atas (Pen Kod Semakan ).

---

Dalam Chrome, arah atas/bawah kotak boleh dikembangkan ditentukan oleh kedudukan tatal dalam port pandangan, bukan reka letak itu sendiri.

Untuk meningkatkan pengalaman pengguna, Chrome mengambil pendekatan unik untuk tingkah laku ini.

Pada asasnya, mereka mengikat elemen DOM ke kedudukan skrol semasa. Pergerakan elemen ("sauh") khusus ini pada skrin akan menentukan pelarasan pada kedudukan tatal (jika ada).

Mereka memanggil kaedah ini "menambat tatal". Algoritma diterangkan pada halaman ini: https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md

Tingkah laku ini pada masa ini unik untuk Chrome, tetapi Google sedang mendesak untuk penyeragaman.

Menurut dokumentasi penambat tatal, penggunaan overflow-anchor: none pada elemen yang sesuai akan melumpuhkan pelarasan sauh tatal.

Maklumat lanjut:

• https://github.com/WICG/ScrollAnchoring/blob/master/interpreter.md
• https://bugs.chromium.org/p/chromium/issues/details? id=739860
• https://hacks.mozilla.org/2019/03/scroll-anchoring-in-firefox-66/
• Menukar susunan fleksibel CSS menyebabkan penatalan