Недавно я столкнулся с проблемой столбцов карт Bootstrap в Chrome 69 в Windows 10 .А именно, при объединении .card-columns с .list-group и .list-group-item, затем включается переполнение для группы списков с overflow: auto и произвольным значением max-height.
Это становится более конкретным, чем это.Вторая карта должна быть родной по отношению к первой.Затем прокрутка до нижней части первой карты делает элементы не взаимодействующими / не активируемыми.
Пример минимальной начальной загрузки:
/* obviously not showing Bootstrap styles */
.list-group {
overflow: auto;
max-height: 128px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-columns">
<!-- Card 1 -->
<div class="card">
<div class="card-header">Overflow Card 1</div>
<div class="list-group list-group-flush">
<a class="list-group-item list-group-item-action" href="#">Item 1</a>
<a class="list-group-item list-group-item-action" href="#">Item 2</a>
<a class="list-group-item list-group-item-action" href="#">Item 3</a>
<a class="list-group-item list-group-item-action" href="#">Item 4</a>
<a class="list-group-item list-group-item-action" href="#">Item 5</a>
<a class="list-group-item list-group-item-action" href="#">Item 6</a>
<a class="list-group-item list-group-item-action" href="#">Item 7</a>
<a class="list-group-item list-group-item-action" href="#">Item 8</a>
<a class="list-group-item list-group-item-action" href="#">Item 9</a>
<a class="list-group-item list-group-item-action" href="#">Item 10</a>
</div>
</div>
<!-- Card 2 -->
<div class="card">
<div class="card-header">Overflow Card 2</div>
<div class="list-group list-group-flush">
<a class="list-group-item list-group-item-action" href="#">Item 1</a>
<a class="list-group-item list-group-item-action" href="#">Item 2</a>
<a class="list-group-item list-group-item-action" href="#">Item 3</a>
<a class="list-group-item list-group-item-action" href="#">Item 4</a>
<a class="list-group-item list-group-item-action" href="#">Item 5</a>
<a class="list-group-item list-group-item-action" href="#">Item 6</a>
<a class="list-group-item list-group-item-action" href="#">Item 7</a>
<a class="list-group-item list-group-item-action" href="#">Item 8</a>
<a class="list-group-item list-group-item-action" href="#">Item 9</a>
<a class="list-group-item list-group-item-action" href="#">Item 10</a>
</div>
</div>
</div>
Хорошо, все еще там?Имея это в виду, я решил устранить стили Bootstrap по одному.Процесс устранения.Отлично, я, вероятно, просто делаю что-то глупое.
Минимальный родной пример:
/* stripped down Bootstrap styles, plus styles from earlier */
body { font-family: sans-serif; padding: 1rem; }
.card-columns {
column-count: 3;
}
.list-group {
max-height: 256px;
overflow: auto;
}
.list-group-item {
/* problem style */
position: relative;
/* -------------*/
display: block;
padding: .75rem 1.25rem;
}
.list-group-item:hover {
background-color: #eee;
}
<div class="card-columns">
<!-- Card 1 -->
<div class="card">
<div class="card-header">Overflow Card 1</div>
<div class="list-group list-group-flush">
<a class="list-group-item list-group-item-action" href="#">Item 1</a>
<a class="list-group-item list-group-item-action" href="#">Item 2</a>
<a class="list-group-item list-group-item-action" href="#">Item 3</a>
<a class="list-group-item list-group-item-action" href="#">Item 4</a>
<a class="list-group-item list-group-item-action" href="#">Item 5</a>
<a class="list-group-item list-group-item-action" href="#">Item 6</a>
<a class="list-group-item list-group-item-action" href="#">Item 7</a>
<a class="list-group-item list-group-item-action" href="#">Item 8</a>
<a class="list-group-item list-group-item-action" href="#">Item 9</a>
<a class="list-group-item list-group-item-action" href="#">Item 10</a>
</div>
</div>
<!-- Card 2 -->
<div class="card">
<div class="card-header">Overflow Card 2</div>
<div class="list-group list-group-flush">
<a class="list-group-item list-group-item-action" href="#">Item 1</a>
<a class="list-group-item list-group-item-action" href="#">Item 2</a>
<a class="list-group-item list-group-item-action" href="#">Item 3</a>
<a class="list-group-item list-group-item-action" href="#">Item 4</a>
<a class="list-group-item list-group-item-action" href="#">Item 5</a>
<a class="list-group-item list-group-item-action" href="#">Item 6</a>
<a class="list-group-item list-group-item-action" href="#">Item 7</a>
<a class="list-group-item list-group-item-action" href="#">Item 8</a>
<a class="list-group-item list-group-item-action" href="#">Item 9</a>
<a class="list-group-item list-group-item-action" href="#">Item 10</a>
</div>
</div>
</div>
Вот где это весело.Это сводится к удалению column-count из .card-columns или удалению position из .list-group-item.Если вы находитесь в правильной среде, запуск CodePen предотвратит активацию стиля .list-group-item:hover (следуя приведенным выше правилам).
С учетом всего сказанного ...
I'mне фанат длинных ТАК вопросов.Я редко читаю их.Итак, я лицемер, я думал, что смогу задействовать вас, ребята. Я вполне уверен, что это ошибка Chrome. Этот код корректно работает как в Firefox, так и в Edge.(Похоже, я ничего не смог найти с помощью быстрого поиска на трекере ошибок Chromium, и это выглядит как очень грандиозный случай, когда нет смысла двигаться вперед с этим.)
О, и изменение размерастраница или двойное нажатие, чтобы выбрать непригодные элементы списка, должны вызвать какое-то перерисовывание / макет, потому что проблема не возникает после этого.Ооо.
Я надеюсь, что вы можете указать где-нибудь существующий отчет об ошибке, обойти эту проблему или доказать, что мой компьютер просто преследует.
Спасибо за чтение этого места.Ждем ваших ответов!
TL; DR
Объединение column-count, overflow:auto и position:relative делает Chrome 69 похожим на привидение в стиле Октября.Отправить справку.
Редактировать 1
Мой вопрос был отредактирован сообществом, чтобы отдавать предпочтение SO фрагментам над CodePen.В фрагменте SO изменение размера страницы не приведет к перерисовке списков, как указано выше.Однако при изменении размера панели предварительного просмотра на исходный CodePen будет воспроизводить эти результаты.Тривиально, но стоит упомянуть.
Edit 2
Протестировано сегодня утром на macOS Mojave.Проблема присутствует в Chrome, но не в Firefox 62 или Safari 12. Так что это не проблема, связанная с webkit или Windows.Я решил вырезать тыквы и вообще избежать свойства позиции.