Я работаю над проектом React и наблюдаю необычное поведение пользовательского интерфейса, о котором не могу понять. Описание функции [list] [*][b]Таблица с разбивкой на страницы[/b]
[*]Последний столбец представляет собой [b]столбец с закрепленными действиями[/b] ([code]position: sticky[/code])
[*]В каждой строке есть [b]кнопка действия с тремя точками[/b]
[*]При нажатии на нее открывается [b]всплывающее окно[/b]
[*]Каждая опция всплывающего окна запускает [b]модальное[/b], которое также запускает POST-запрос к серверная часть
[/list] Ожидаемое поведение Когда открывается модальное окно: [list] [*]Модальное окно появляется над всем ([code]z-50[/code] в Tailwind)
[*]Фоновое содержимое размыто или затемнено
[*]Строки таблицы должны визуально оставаться неизменными внизу
[/list] Фактическое поведение Когда я нажимаю действие в строке: [list] [*]Модальное окно открывается правильно
[*]НО [b]каждая строка ниже выбранной строки получает белый фон[/b]
[*]Строки над выбранной строкой выглядят нормально
[*]Столбец прикрепленных действий уже имеет белый фон (предназначено)
[/list] Соответствующий стиль [list] [*]Модальное наложение: z-50
[*]Прикрепленный столбец действий: z-10 + белый фон
[*]Модальное наложение размывает фон
[/list] Структура компонентов (упрощенная) [list] [*]Таблица построена с использованием [b]массива конфигурации столбцов[/b]
[*]Каждый столбец определяет:
[*]
Метку заголовка
[*]Ячейку рендерер
[/list]
[*]Для столбца липких действий:
[*] [list] Значение ячейки — ReactNode
[*]Этот компонент содержит:
[*]
Кнопка с тремя точками
[*]Компонент Popover
[*]Модальная логика внутри всплывающего окна
[/list]
Мое замешательство [list] [*]Модальное окно имеет более высокий z-индекс, чем прикрепленный столбец, поэтому оно правильно отображается сверху.
[*]Но [b]почему все строки ниже выбранной строки получают белый фон?[/b]
[*]Это:
[*]
A проблема с контекстом стекирования?
[*]Что-то связано с положением: липким созданием нового контекста стекирования?
[*]Побочный эффект модального наложения/фона?
[*]Проблема с перерисовкой/перекомпоновкой, вызванная тем, как смонтировано всплывающее окно/модальное окно?