Ошибка отображения количества столбцов в CSS после обновления chrome 70.0.3538.77 (официальная сборка) (64-разрядная версия) - PullRequest
Новая
       7

Ошибка отображения количества столбцов в CSS после обновления chrome 70.0.3538.77 (официальная сборка) (64-разрядная версия)

0 голосов
/ 08 ноября 2018

С момента обновления до chrome v70.0.3538.77 у пользователей моего домена возникали проблемы с отображением таблиц при применении CSS {column-count: 2}.

При прокрутке таблицы в пределах фиксированной высоты div, область прокрутки остается неопределяемой (белая). При изменении размера окна браузера содержимое перерисовывается, и содержимое отображается так, как оно должно было отображаться при прокрутке.

Следующая скрипта демонстрирует проблему, убедитесь, что ширина экрана достаточно велика, чтобы таблицы «один» и «два» отображались рядом друг с другом.

Проблема демонстрируется здесь: https://jsfiddle.net/L2z4srwp/1/

После прокрутки первой таблицы (обратите внимание на неопределяемые строки внизу слева): enter image description here После последующего изменения размера окна браузера (обратите внимание, строки перерисовываются): enter image description here

Вот некоторые вопросы CSS: 

div.multiColumn {
    -moz-column-count: 2;
    -moz-column-gap: 1rem;
    -webkit-column-count: 2;
    -webkit-column-gap: 1rem;
    column-count: 2;
    column-gap: 1rem;
    padding: 0em;
}

и HTML 

<div class="multiColumn" id="divMultiColumn">
    <ul class="noBullets" id="ulMultiColumn">
        <li>
            <h3>One</h3>
            <div class="scrollingTableDiv">
                <table class="teStartenTabel scrollingTable" id="id5be42585873c8">
                <tr>[Lot's of rows]</tr>
                </table>
            </div>
            <script>document.getElementById("id5be42585873c8").dataset.scrollBeyond=15;</script>
        </li>


        <li>
            <h3>Two</h3>
            <div class="scrollingTableDiv">
                <table class="teStartenTabel scrollingTable" id="id5be42585873c89">
                    <tr><th>Datum</th><th>Blah</th><th>Blah</th><th>Blah</th><th>Blah</th><th>Blah</th><th>Blah</th><th>Blah</th><th>Blah.</th><th>Blah</th></tr>
                    <tr>[Lot's of rows]</tr>
                </table>
            </div>
            <script>document.getElementById("id5be42585873c89").dataset.scrollBeyond=15;</script>
        </li>
    </ul>
</div>

С JavaScript: 

        <script>        
        function makeTablesScroll() {
            $(".scrollingTable").each(function() {
                var table = this;
                maxRows = parseInt(this.dataset.scrollBeyond) + 1;
                var wrapper = table.parentNode;
                var rowsInTable = table.rows.length;
                var height = 0;
                if (rowsInTable > maxRows) {
                    for (var i = 0; i < maxRows; i++) {
                        height += table.rows[i].clientHeight;
                    }
                    wrapper.style.height = height + "px";
                }
            });
        }
    </script>

Какие-нибудь решения или обходные пути? Я прибег к версии flexbox css dev, но это создает растр со строками и пробелами, если левая таблица занимает большую высоту, чем правая таблица. Стратегия столбцов аккуратно уравновешивает оба столбца и выравнивает объект прямо под каждым независимо от высоты объектов в другом столбце.

Для справки я добавил отчет об ошибке Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=903287

...