Bug 289850

Created attachment 474577 [details] Screenshot of the web page showing the bug, with inspector opened This website, https://marcellosplace.com/ , has an index of recipe category groups at the bottom of every page. Each category group is marked up as a UL preceded by an H3. The H3 has `break-after: avoid-column;` to prevent it from being widowed from the UL items. This `break-after` is ignored. The problem is 100% reproducible (not random). Expected behavior: based on the code, the H3 should always be wrapped to the next column. Other browsers: Blink renders the code as expected. Relevant part of the HTML: ``` <div class="grouping"> <h3>Dish Type</h3> <ul class="categories"> <li> <a href="/categories/biscuit/">biscuit</a> <span class="count">1</span> </li> <li> <a href="/categories/cake/">cake</a> <span class="count">8</span> </li> ``` Associated CSS: ``` /*****************************************************/ /* CATEGORY INDEX */ /*****************************************************/ div.recipe-categories-container { max-width: calc(4 * 9rem + 5 * 28px); margin: 4rem auto; .recipe-categories { font-family: var(--sans-serif); margin: 2rem 28px; } .grouping-container { columns: 9rem 4; gap: 28px; .grouping { font-size: var(--small); margin-bottom: 1em; } } h2 { font-family: var(--sans-serif); font-weight: 300; font-feature-settings: 'smcp'; margin: 1.5em auto; text-align: center; } h3 { break-after: avoid-column; font-weight: bold; margin-bottom: .5em; } ul.categories { li { margin: .25em 0; /* Avoid widows and orphans */ &:nth-child(-n+2) { break-after: avoid-column; } &:nth-last-child(-n + 2) { break-before: avoid-column; } } a { text-decoration-color: var(--lighter-cyan); } span.count { color: var(--lighter-grey); font-size: var(--small); margin-left: .25em; } } } ```