bootstrap模态上的黑条（Android chrome）

Question

我在Android的chrome上打开modal的时候会出现黑色的“条形”，就像我的附件上显示的那样，这是我的代码，我正在使用bootstrap 4.1。有人可以帮帮我吗？。

<div class="modal fade" id="modalCombos" tabindex="-100" role="dialog" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Combos</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                @foreach (var item in combosList)
                                {
                                <div class="row" style="margin-bottom:5px">
                                    <div class="btn btn-danger col-12" onclick="addItem('@item.Nome', '@item.Valor.ToString("F")')">
                                        @item.Nome - R$ @item.Valor.ToString("F")
                                    </div>
                                </div>
                                }
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                            </div>
                        </div>
                    </div>
                </div>

Answer 1

将.fade.in上的bootstrap.min.css不透明度属性从1更改为0.99：

.fade.in{opacity:0.99}

也可以在bootstrap.min.css：

上试试

.fade.in{opacity:1;-webkit-backface-visibility: hidden;}