diff --git a/src/webparts/requestPortal/shared/approval/ui/approval.module.scss b/src/webparts/requestPortal/shared/approval/ui/approval.module.scss index e3c8415..0b5b8c5 100644 --- a/src/webparts/requestPortal/shared/approval/ui/approval.module.scss +++ b/src/webparts/requestPortal/shared/approval/ui/approval.module.scss @@ -95,6 +95,19 @@ // сплющивания колонок. На телефоне таблица становится карточками (медиазапрос ниже). .matrixScroll { overflow-x: auto; + // overflow-y ОБЯЗАН быть задан явно. По спецификации, если одна ось получает + // прокрутку, вторая с `visible` вычисляется в `auto` — то есть один + // overflow-x: auto включал прокрутку и по вертикали тоже. А анимация + // перестановки (см. ui/useFlipRows) стартует с translateY на высоту строки: + // при удалении строки нижние сначала отрисованы СМЕЩЁННЫМИ ВНИЗ, вылезают за + // нижнюю границу контейнера — на кадр появляется вертикальная полоса + // прокрутки, из-за неё контейнер сужается, текст в колонках перевёрстывается, + // строки съезжают, а через 380 мс всё это откатывается назад. Отсюда и + // дрожание интерфейса на каждое удаление позиции. + // + // hidden, а не clip: `clip` не создаёт scroll container, и тогда вертикальный + // вылет анимации утёк бы наружу, прокручивая уже саму страницу. + overflow-y: hidden; -webkit-overflow-scrolling: touch; } diff --git a/src/webparts/requestPortal/shared/approval/ui/useFlipRows.ts b/src/webparts/requestPortal/shared/approval/ui/useFlipRows.ts index 9fc8145..b436a2b 100644 --- a/src/webparts/requestPortal/shared/approval/ui/useFlipRows.ts +++ b/src/webparts/requestPortal/shared/approval/ui/useFlipRows.ts @@ -22,8 +22,9 @@ import * as React from 'react'; // центра разрывало блок визуально. Плюс строка становилась шире контейнера // и .matrixScroll (overflow-x: auto) на время анимации показывал полосу // горизонтальной прокрутки. -// • пружинистый перелёт (cubic-bezier с >1): при overflow-x: auto вторая ось -// тоже становится auto, и вылет за край таблицы строку бы обрезало. +// • пружинистый перелёт (cubic-bezier с >1): вылет за край .matrixScroll +// обрезается (там overflow-y: hidden — см. approval.module.scss), так что +// перелёт был бы виден только как срезанная строка. // • подсветка ВСЕХ переехавших строк: при обмене двух шагов двигаются оба, и // жёлтым заливало пол-таблицы. Подсвечиваем только тот блок, который двигал // пользователь (activeKeys).