Я использую vue, bootstrap 4 и bootstrap-vue.
Я пытаюсь исправить визуальную ошибку, которая появляется, когда я нажимаю на кнопку (см. Прикрепленный анимированный скриншот).
ошибка видна, если посмотреть на нижнюю часть таблицы: у нее не должно быть дополнительных пробелов внизу .
Я полагаю, что под капотом есть некоторый JavaScript, который управляет внешним видом таблицы.
Как найти функцию, которая запускает onMouseOver
, когда я перемещаю указатель над кнопкой "скачать"?
![Download button issue in Chrome](https://i.stack.imgur.com/593iH.gif)
UPDATE
Следуя совету, я попытался повторить проблему в Firefox .
Кажется, проблема существует, но немного по-другому, см. Прикрепленный анимированный скриншот.
У меня есть ощущение, что проблема может быть в popper.js, используемом bootstrap для внедрения элементов в DOM.
Кнопка «скачать» была создана с помощью bootstrap-vue, так что это может быть что-нибудь из этого.
Тем временем я пытаюсь воссоздать кнопку с помощью ванильного загрузчика. Пожелай мне удачи.
![Download button issue in Firefox](https://i.stack.imgur.com/DUZCe.gif)
Дальнейшее обновление
Похоже, что popper.js ищет ближайшего родителя с правилом css overflow: [something];
и определяет из этого позицию раскрывающегося списка. Делая это в некоторых браузерах (Chrome делает это не так, как Firefox, AFAIK), он заставляет полосу прокрутки появляться даже при том, что прокручивать нечего, отсюда и пустое пространство.
Решение, которое я выбрал, состоит в том, чтобы не использовать popper.js и использовать вместо него пользовательский компонент. Не идеально, но пока подойдет.
Спасибо всем за ваш вклад.