Bootstrap 4下拉菜单隐藏并闪烁 [英] Bootstrap 4 dropdown menu hidden and flickering

问题描述

我看过其他帖子，但它们的出现时间为3-4岁，并且Bootstrap/Popper进行了很多更改.

I've looked at other posts, but they appear 3-4 years old, and Bootstrap/Popper has many changes.

我在Bootstrap 4中有一个菜单下拉菜单，该菜单位于容器上，上面有一个transform/translate2d.出现下拉菜单时，它位于页面上的另一个容器下方(与z-index无关)，并且在我将鼠标移到它上方时闪烁一堆.这发生在Chrome和Firefox中，因此我认为它与Bootstrap及其Popper.js的使用有关.

I have a menu dropdown in Bootstrap 4 that is inside a container with a transform/translate2d on it. When the dropdown menu appears, it is below another container on the page (regardless of z-index) and it flickers a bunch as I move the mouse over it. This occurs in Chrome and Firefox so I think it is related to Bootstrap and their Popper.js use.

如果我删除下拉菜单位于其中的大容器上的transform/translate3d，一切正常.

这里是一个例子；只需单击下拉箭头即可查看重叠问题.然后，将鼠标移到最小计数"行的末尾可以看到一些闪烁.如果您注释掉此CSS行，则可以正常工作.

Here is an example; just click the dropdown arrow to see the overlap issue. Then you an move the mouse over the end of the "Minimum Count" row to see some flickering. If you comment out this CSS line, it works fine.

transform: translate3d(0%, -8px, 0);

https://jsfiddle.net/paultechguy/mtcbLt5t/30/

推荐答案

经过大量调查，这是浏览器堆栈上下文"的问题.Bootstrap 4/Popper.js下拉菜单执行CSS transform/translate3d，这是罪魁祸首.要解决此问题，请进行以下CSS更改:

After much investigation, this was an issue with the "stacking context" for browsers. The Bootstrap 4 / Popper.js dropdown menu does a CSS transform/translate3d and this was the culprit. To solve, make these CSS changes:

具有下拉菜单的容器的父元素(这是下拉菜单的两个):

Parent element of the container that has the dropdown menu (this is two up from the dropdown menu):

position: relative;
z-index: 10;

然后在具有下拉菜单的容器上:

Then on the container that has the dropdown menu:

z-index: 20; /* a value higher then the 10 above */

希望这对其他人有帮助.

Hope this helps others.

这篇关于Bootstrap 4下拉菜单隐藏并闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！