css.properties.break-after / css.properties.break-before - "avoid" / "avoid-page" is not supported in Firefox

[n1kPLV]

What type of issue is this?

Incorrect support data (example: BrowserX says "86" but support was added in "40")

What information was incorrect, unhelpful, or incomplete?

The compat data claims that break-before: avoid and/or break-after: avoid works in Firefox from Version 72 on. This is incorrect, as these are still not implemented.

What browsers does this problem apply to, if applicable?

Firefox

What did you expect to see?

Firefox not supporting this property

Did you test this? If so, how?

I constructed a web page such that a page break will occur after a block, in this case a h2, and included a css style with

h2 {
        break-after: avoid;
} 

I opened this page in firefox 123, opened the "printing" dialog and verified in the print preview that a page break was inserted after the h2 element.

I then also tested with

h2 + * {
        break-before: avoid;
} 

which also didn't prevent the page break between the h2 and the following page element.

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

There is an open firefox bug related to implementing this feature from 12 years ago: https://bugzilla.mozilla.org/show_bug.cgi?id=775617

Do you have anything more you want to share?

No response

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/break-after

MDN metadata

MDN page report details

• Query: css.properties.break-after
• Report started: 2024-03-27T13:27:11.183Z

[tyler-wright]

I agree, I don't seem to be able to get it working with a webpage in Firefox where it works perfectly in Chrome.

Here's Firefox:

and here's Chrome:

The CSS applied was as simple as:

@media print {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        break-after: avoid;
    }

    h1+p,
    h2+p,
    h3+p,
    h4+p,
    h5+p,
    h6+p {
        break-before: avoid;
    }


    p {
        orphans: 3;
        widows: 3;
    }
}

And funnily enough, I can't see any reference to their release on the release notes for the Firefox version 72 where it was supposedly released: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/72

It seems like this was just never released at all?

[caugner]

First of all, I was able to reproduce that break-after: avoid does not have the expected effect in Firefox 139 and Safari 18.5. I did not check break-before: avoid, but it's fair to assume they have the same support.

The data for break-after was added in https://github.com/mdn/browser-compat-data/pull/21017, and updated in https://github.com/mdn/browser-compat-data/pull/26329. Both changes were based on the MDN BCD collector, which checks the result of CSS.supports("break-after", "avoid"), and cannot check whether the CSS property value actually has the expected rendering effect.

Firefox 65 introduced break-before/after via bug 775618, reusing the page-break-before/after implementation. Since CSS.supports("page-break-after", "avoid") already returned true before that, it is normal that CSS.supports("break-after", "avoid") also returned true after that.

Long story, short:

1. Created Firefox bug 1972340 and Safari bug 294559 to report the issue with CSS.supports() returning true.
2. Opened a BCD PR setting Firefox and Safari to { version_added: false } for both break-before: avoid and break-after: avoid: https://github.com/mdn/browser-compat-data/pull/27073
3. Opened a Collector PR adding custom overrides similar to page-break-after/before: avoid: https://github.com/openwebdocs/mdn-bcd-collector/pull/2476