Bootstrap: [v4] Modal flickering when within .list-group-item

Created on 5 Jan 2018 · 18Comments · Source: twbs/bootstrap

Hi,

In some cases the modal filckers (see video).

bootstrap

This is the html:

<div class="row align-items-center">
    <div class="col-md-6">
        <strong>Test</strong> <br>
        Street 1 31 <span><span class="badge badge-info">Primary</span></span> <br>
        1234AA Amsterdam <br>
    </div> 

    <div class="col-md-6 text-right"><!----> 
        <div class="d-inline-block text-left">
            <a href="#" class="btn btn-sm btn-warning">Edit</a> 

            <div tabindex="-1" role="dialog" id="editModalLHzoKhSu" class="modal fade">
                <div role="document" class="modal-dialog">
                    <form class="modal-content">
                        <div class="modal-header"><p id="editAddressModalLabel" class="modal-title h5">Edit address</p> <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
                        </div> 

                        <div class="modal-body">
                            // Form
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

If you need more info, please let me know :)

OS: MacOS,
Browser: Chrome 63.0.3239.84

css v4

Source

gizburdt

👍12

Most helpful comment

Quick fix for now:

.list-group-item, .list-group-item:hover{ z-index: auto; }

gizburdt on 19 Jan 2018

🎉12 👍12

All 18 comments

@gizburdt do you have some custom css/js that can cause this? Can you make a jsbin or similar that demonstrates this behaviour?

Ruffio on 5 Jan 2018

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via CodePen or JS Bin and report back with your link, Bootstrap version, and specific browser and OS details.

Johann-S on 5 Jan 2018

Hmm, will have a look at it. The code is nested in my project (and Vue), so I will have a try moving it to JSbin.

Extra info: The error is not present in 4.0.0-beta.2, but it is in 4.0.0-beta.3

gizburdt on 9 Jan 2018

Here is the JS bin: https://jsbin.com/sitemohuno/2/edit?html,js,output

The problem happens when the modal is within a list-group-item. Normally I place my modals at the bottom of the body, but I can't in my current project, because i'm using vue components.

gizburdt on 18 Jan 2018

👍7

@Johann-S Looks like this is causing the problem:

.list-group-item:hover{ z-index: 1; }

gizburdt on 18 Jan 2018

👍3

I met this problem already, not happen in beta 2 but in beta 3, it's very annoy. It happen in list-group-item confirm.
Using SPA Angular Js + bootstrap 4 beta 3.
Run on Chrome, ubuntu 16.04.

namnh06 on 19 Jan 2018

This is not a browser bug. This occurs because the z-index: 1 of a .list-gorup-item:hover cause a new stacking context.

I created a very simple pen: https://codepen.io/anon/pen/ppqbeq
You can see the modal backdrop (z-index: 1040) is above the modal (z-index: 1050) when hovering.