Bug 91517 – Prevent the box model from being affected by zooming

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

Created attachment 152779 [details]
Illustration of the gap

Imagine a div element 100px wide and 10px high, containing 10 inline-block div elements with each being 10px wide and 10px high.

None of the div elements has margin, border or padding.

The child div elements should exactly fit into the parent div element.

Now when zooming is applied, the layout gets corrupted:

Imagine the zoom being set to 144%.

The parent div element is then rendered with a physical width of 100px * 1.44 = 144px.

The child div elements are rendered with physical widths of 10px * 1.44 = 14.4px each, which become 14px.

The 10 child div elements sum up to a total width of 14px * 10 = 140px.

They do not fit into the parent div element any more, producing an unwanted 4px gap, which could also become much bigger, e.g. 38px when filling a 960px div with 48 20px divs at a zoom factor of 144%.

The solution would be to not change width, height, padding, border and margin when zooming, but instead, calculate the box model as if the window would not have been zoomed, and then zooming the coordinates at which elements would be placed on the screen.

For example, the parent div element's top-left-coordinate would be 0/0 when placed at the top-left corner of the whole website. Its bottom-right-coordinate would be 100/10 (excluding).

Now these coordinates should be altered in relation to the zoom level when rendering the element. The top-left-coordinate remains 0/0, the bottom-right-coordinate becomes 144/14, because 100*1.44=144 and 10*1.44=14.4 becoming 14.

The coordinates of the child elements are altered in the same way. The last child element's bottom-right-coordinate will be 144/14, which is the same as the one of the parent div element, as these coordinates also were the same when unzoomed.

The edges between the 10 child div elements would then be evenly distributed within the area of the parent div.

[Emil A Eklund]

This is being addressed by the introduction of subpixel layout. See bug 60318 for details.

[Emil A Eklund]

Now that subpixel layout is enabled in the chromoum, apple and efl ports I consider this issue fixed.