flex column reverse с скролом ведет себя не так как flex column

@borovik2 · Регистрация: 18.03.2018

Студворк — интернет-сервис помощи студентам

Привет , у меня есть список flex column с скролом. когда добавляю элементы скрол прижат всегда верх (это нормальное поведение для html спецификации)

flex column reverse с скролом ведет себя не так как flex column

Но если меняю на reverse , то ожидаем такого же поведения только снизу , но на самом деле это так не работает , если чутка подвигать скрол и опять прижать вниз.

Видео с reserve , видим что если подвигать скрол , то элемент добавляется вниз, но при этом скрол делает "прыжок" и не прижимается вниз

Видео пруф что без reserve в любом варианте скрол скрол прижат вверх !

sandbox: https://codepen.io/shenkonor-mail-ru/pen/mdqveey

Что это баг HTML ?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script src="https://cdn.tailwindcss.com"></script>
 
<div class="h-screen bg-teal-200 flex flex-col">
  <div class="h-20 flex-shrink-0 bg-indigo-400">header</div>
  <div class="flex-grow grid grid-cols-[300px_1fr] grid-rows-1 bg-green-200 min-h-0">
    <div>left short content</div>
    <div class="flex flex-col">
      <div id="list" class="flex-grow bg-rose-300 overflow-y-scroll flex flex-col-reverse">
      </div>
      <button id="btn" class="bg-fuchsia-800 rounded shadow">ADD</button>
    </div>
  </div>
  <div class="h-20 flex-shrink-0 bg-indigo-400">footer</div>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var btn = document.getElementById("btn");
 
let i = 1;
 
btn.onclick = function(event) {
 
 add()
}
 
function add(){
   var div = document.createElement("div");
   div.classList.add("h-60", "border", "border-black", "text-xl", "shrink-0");
  div.textContent += "ADDED " + i;
  i++;
   document.getElementById('list').prepend(div);
 // document.getElementById('list').append(div);
}
 
for (var z = 0; z < 6; z++) {
  add();
}

@NTHing · 05.03.2022, 19:38

Потестил в Хроме и Мозилле. Указанного бага нет...

@borovik2 · 05.03.2022, 20:05 **[ТС]**

NTHing,
я не верю можете повторить видео 1 и выложить?

@NTHing · 05.03.2022, 20:38

Вот

@borovik2 · 09.03.2022, 21:01 **[ТС]**

Спустя 5 дней я нашел проблему.
Оказывается движок хрома использует какието fractional'ы , и это проблема супер редчайшая зависящая от сочетаний твоего разрешения монитора + включены ли у тебя в OC сабпиксельное сглаживание + включен ли у тебя зум страницы , и в таком сочетании получается что это фракшены выдают в самой высокой точки скрола позицию -1 ( с reverse соответственно 1 ) ,а должны 0.
ГОСПОДИ 5 ДНЕЙ МУЧЕНИЙ .....

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! в-строка - входное арифметическое выражение в инфиксной(обычной). . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@NTHing 1818 / 962 / 388 Регистрация: 26.11.2014 Сообщений: 1,962 Записей в блоге: 1
	05.03.2022, 19:38
	Потестил в Хроме и Мозилле. Указанного бага нет... 1

@borovik2 7 / 1 / 1 Регистрация: 18.03.2018 Сообщений: 44
	05.03.2022, 20:05 [ТС]
	NTHing, я не верю можете повторить видео 1 и выложить? 0

@borovik2 7 / 1 / 1 Регистрация: 18.03.2018 Сообщений: 44
	09.03.2022, 21:01 [ТС]
	Спустя 5 дней я нашел проблему. Оказывается движок хрома использует какието fractional'ы , и это проблема супер редчайшая зависящая от сочетаний твоего разрешения монитора + включены ли у тебя в OC сабпиксельное сглаживание + включен ли у тебя зум страницы , и в таком сочетании получается что это фракшены выдают в самой высокой точки скрола позицию -1 ( с reverse соответственно 1 ) ,а должны 0. ГОСПОДИ 5 ДНЕЙ МУЧЕНИЙ ..... 1