MozillaZine

Incremental reflow bugs

From MozillaZine Knowledge Base

“Incremental reflow” refers to the way web browsers add elements to a web page as the page loads, adjusting sizes and spacing where appropriate. Incremental reflow is especially noticeable when loading pages with tables or images where sizes are not explicitly defined, or are defined as percentages.

Problems

One problem with Mozilla’s incremental reflow is that it is non-deterministic; that is, the layout of the page it produces may differ from one page load to another, depending on the timing of data, size of the browser window, and other factors. Another problem occurs when the page fully loads, but the layout is “stuck” in a position that should have been corrected by content that appeared later in the document.

An infamous example of the latter case is the “Slashdot rendering bug,” in which a column in a layout table was consistently sized incorrectly. This particular bug was fixed in the Gecko 1.8 branch, and the fix will be included in Firefox 1.5 (and all future releases).

In another example, there have been reports of Firefox users seeing some Microsoft KB articles cut off [1].

These problems belong to a class of bugs known as “incremental reflow bugs.” In Bugzilla, these are often denoted by including the tag {inc} in the bug report’s summary.

Solutions

As a user, you can correct layout problems that show up due to incremental reflow bugs by forcing a reflow of the document. This is as simple as changing the font size of the page, resizing the window, or reloading the page.

As a web developer, you can avoid incremental reflow bugs by explicitly setting dimensions on elements that accept them, avoiding nested tables, and using percentage widths judiciously. There are also methods to force a page reflow (in certain circumstances) via JavaScript.

As a Gecko developer, you may want to read the official notes on HTML reflow and the howto on debugging frame reflow.

Future

Mozilla developer David Baron landed a substantial reworking of Gecko’s incremental reflow code with the aim of eliminating many of the root causes for incremental reflow bugs. These changes are incorporated in the 1.9 branch of the Gecko engine, and will appear in Firefox 3.