Mozilla Has Fixed an 18-Year-Old CSS Bug in The Firefox Browser


Why this is important: There are software flaws that tend to persist even in the most active projects. An open source browser like Firefox, however, aims to be a real record-breaker, fixing bugs from a decade ago just in time for Christmas.

The flaw in the Firefox browser was marked as “fixed” immediately after reaching the age of majority. Bug 290125 was first discovered 18 years ago when Mozilla developers discovered that the open source browser incorrectly handles the pseudo-element ::first-letter CSS.

As explained in the MDN web docs, the CSS pseudo-element ::first-letter “applies styles to the first letter of the first line of a block element, but only if it is not preceded by other content (for example, images or embedded elements). tables)”. When moving to the left to create a letter, as a bug reporter said 18 years ago, Gecko (Firefox’s current layout engine) “ignores any declared row height and inherits the row height of the parent block.”

Incorrect behavior — according to the CSS standard — “does not allow authors to position the first letter, reducing the line margin by using a small line height.” The end result was that Firefox displayed the first letter incorrectly, while other browsers (Opera 7.5+ and Safari 1.0 at the time) handled the CSS function correctly.

The initial problem was reported on April 12, 2005, and it was present in the first major release of Firefox (1.0). The first fix appeared in Firefox 3.0 in 2007, when Mozilla developers solved the problem of different line height rendering on the Mac platform. The error was later rediscovered (in 2014) when the CSS working group, which manages the CSS standard in the World Wide Web Consortium, decided that Firefox did not meet the official CSS specifications with its special handling ::first-letter element.

The bug was finally fixed on December 20, 2022, and the new code should appear in the upcoming release of Firefox 110, which is currently scheduled for February 2023. However, as Mozilla developer Jonathan Cue explained, the current solution is a “patch” designed to “minimize risk” and make it easier to switch between the existing “legacy” behavior of the Gecko layout engine and the new “compatible” behavior.

Eventually Mozilla should “redefine ::the first-letter is completely during frame construction, not during recomposition,” Q explained. At the moment, a newly created patch allows the browser to choose between three different behaviors: “use narrow glyph boundaries”, which is the existing behavior of Gecko; “do not use hard glyph boundaries, observe the line height” to get a result similar to Webkit/Blink (Chromium/Chrome); “automatically choose” between two the above behaviors are based on heuristics.


Please enter your comment!
Please enter your name here