Datatables - Firefox - Проблема с полосой прокрутки в браузере

Question

У меня проблема, которая появляется только в Firefox. У меня есть bootstrap tabview - В каждой вкладке есть разные таблицы данных.

(в Chrome): если я изменю вкладки и сделаю другую таблицу видимой, все в порядке https://imgur.com/O80dpkb

(в Firefox): если Я переключаюсь между вкладками, на которых не активирована ни одна полоса прокрутки браузера, но все в порядке, но если я переключаюсь между вкладкой, на которой не активна ни одна полоса прокрутки, и тем, где полоса прокрутки активна, это происходит: https://imgur.com/YL2khx1

Это мой код для таблицы:

<table id="ticketdata-erstelltetickets" class="table table-bordered table-hover" style="width:100%">
                            <thead>
                                <tr>

                                    <th width="50px"><a class="btn btn-primary btn-sm pt-2 pb-2" id="hidethead"
                                            target="objektnr"><i class="mdi mdi-filter m-2"></i></a></th>
                                    <th data-priority="2" width="100px">Ticket Nr</th>
                                    <th>Titel</th>
                                    <th class="type">Typ</th>
                                    <th>Für</th>
                                    <th>Priorität</th>
                                    <th>Bereich</th>
                                    <th>Alter</th>
                                    <th>Status</th>
                                    <th>Fortschritt</th>
                                </tr>
                            </thead>

                            <tbody>
                            </tbody>

                        </table>

Скрипт:

$(document).ready(function () {
                var data = {{ erstellte_tickets|raw }};

                var table = $('#ticketdata-erstelltetickets').DataTable({
                    data: data,
                    responsive: 'true',
                    columns: [
                        {
                            data: null,
                            sortable: false,
                            render: function (data, type, full, meta) {                                                            // /'+full.id+'/' + full.creator + '
                                return '<a class="btn btn-primary btn-sm btn-rounded pt-2 pb-2" href="{{ app.request.getBaseURL() }}/ticketdetail/' + full.id + '/"><i class="mdi mdi-open-in-new m-2"></i></a>'
                            },
                            width: '32px'
                        },
                        { data: "ticketid" },
                        { data: "title" },
                        {
                            data: "type",
                            name: "type",
                            className: "type",
                            render: {
                                display: function (data, type, full) {
                                    if (data == "error") {
                                        return '<span class="mdi mdi-close-octagon mdi-24px" style="color:red"></span>';
                                    } else if (data == "request") {
                                        return '<span class="mdi mdi-file-check mdi-24px" style="color:rgb(255, 180, 80)"></span>';
                                    } else {
                                        return '<span class="mdi mdi-lightbulb-on mdi-24px" style="color:#6e6ed0"></span>';
                                    }
                                }
                            },
                            width: '40px'
                        },
                        {
                            data: "assigned_to",
                            name: "assigned_to",
                            className: "assigned_to",
                        },
                        { 
                            data: "priority",
                            name: "priority",
                            className: "priority",
                            render: {
                                display: function (data, type, full) {
                                    if (data == "hoch") {
                                        return '<span class="mdi mdi-comment-alert mdi-24px" style="color:red"></span><span class="mdi mdi-comment-alert mdi-24px" style="color:red"></span><span class="mdi mdi-comment-alert mdi-24px" style="color:red"></span>';
                                    } else if(data == "mittel") {
                                        return '<span class="mdi mdi-comment-alert mdi-24px" style="color:orange"></span><span class="mdi mdi-comment-alert mdi-24px" style="color:orange"></span>';
                                    } else {
                                        return '<span class="mdi mdi-comment-alert mdi-24px" style="color:green"></span>';
                                    }
                                }
                            },
                            width: '80px'
                        },
                        { 
                            data: "department",
                            name: "department",
                            className: "department",
                            render: {
                                display: function (data, type, full) {
                                    var output = 'kein Bereichsname';
                                    if(data == null || data == "") {
                                        output = 'kein Bereichsname';
                                        return output;
                                    } else {
                                        for(i = 0; i <= fid.length; i++){
                                            if (data == fid[i]) {
                                                output = fidname[i];
                                                return output;
                                            }

                                        }
                                    }

                                }
                            }
                        },
                        {
                            data: "created_on",
                            render: function (d) {
                                var time = moment(d);

                                var eventdate = moment(d);
                                var todaydate = moment();

                                var eventtime = moment(time);
                                var todaytime = moment();

                                if(todaydate.diff(eventdate, 'days') == "0"){

                                    if(todaytime.diff(eventtime, 'hours') == "0") {

                                        return todaytime.diff(eventtime, 'minutes') + " Min";

                                    } else {

                                        const min = todaytime.diff(eventtime, 'minutes') - (todaytime.diff(eventtime, 'hours') * 60);
                                        return todaytime.diff(eventtime, 'hours') + " Std " + min + " Min";
                                    }

                                } else if (todaydate.diff(eventdate, 'days') == "1") {

                                    return todaydate.diff(eventdate, 'days') + " Tag";     

                                } else {

                                    return todaydate.diff(eventdate, 'days') + " Tage";
                                }

                            },
                            width: '100px',
                        },
                        {
                            data: "status",
                            name: "status",
                            width: '105px',
                        },
                        { 
                            data: "fortschritt",
                            name: "fortschritt",
                            width: '90px', 
                        } 
                    ],
                    order: [[1, "asc"]],
                    language: {
                        "url": "/js/German.json"
                    },
                    "processing": true,
                    autoWidth: false,
                    //width: '100%',

                    orderCellsTop: true,
                    fixedHeader: true,
                });

У меня также есть функция щелчка для каждой вкладки с columns.adjust, которая также исправляет некоторые проводные поведения с show / скрыть таблицы

$('#pills-ideensammlung-tab').click(function() {

        var table = $('#ticketdata-ideensammlung').DataTable();

        table.columns.adjust();
    });

Проблема появляется только в Firefox сейчас .. и только если я переключаюсь на таблицу, где активна полоса прокрутки браузера.

Я думал, что что-то всегда показывает полоса прокрутки в браузере с CSS

overflow-y: scroll;

, но это не работает в Firefox ...

Что я должен сделать, чтобы избавиться от этой проблемы? Ваша помощь будет высоко ценится.