Bug 17966 – REGRESSION (r31114-r31132): Clearing via br behaves unpredictably

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Eric Eggert]

In a German mailing list a bug was discovered which seems to be related to fonts and the width of block elements. It was discovered in Safari 3.1 (Windows and Mac). 

The web developer who discovered it uses <br style="clear:right" /> to clear his floats, which works under certain circumstances and doesn’t under others. As you can see in the document the first example is not cleared while both other examples do.

The difference between example one and two is the omission of a space between an em and an img element. In example three there is no border around the image, which seems to leave more space, which is needed for the br to unfold it’s clearing magic.

The problem can be worked around by assigning a different typeface[1] or another font size[2], which may or may not be what you’d like to do in such a situation. The problem disappears if the user is resizing the text (larger or smaller). Even just playing with the widths of the container or margins and paddings can lead to a correct behavior. But this issue seems to be even dependent on the content of the elements. If I short the word to „Angestellt“ the issue disappears.[3]

The latest Nightly built doesn’t respect that method of clearing at all, at least in different font and even window sizes, which is more than strange.[4–6]

[1] http://ericeggert.net/webkit/2008-03-20/2.html
[2] http://ericeggert.net/webkit/2008-03-20/3.html
[3] http://ericeggert.net/webkit/2008-03-20/4.html
[4] http://ericeggert.net/webkit/2008-03-20/webkit-nightly1.png (After load/reload)
[5] http://ericeggert.net/webkit/2008-03-20/webkit-nightly2.png (Resized window, no reload)
[6] http://ericeggert.net/webkit/2008-03-20/webkit-nightly3.png (Font size smaller, two times)

Probably it’s a good idea to discourage float clearing with the br element, but the Safari/Webkit Nightly behavior seems to be quite inconsistent.

I hope that the description, examples and screenshots help to confirm the issue and solve it.

[Eric Eggert]

(In reply to comment #0)

> [4] http://ericeggert.net/webkit/2008-03-20/webkit-nightly1.png (After
> load/reload)
> [5] http://ericeggert.net/webkit/2008-03-20/webkit-nightly2.png (Resized
> window, no reload)

Those were of course jpgs for whatever reason:

[4] http://ericeggert.net/webkit/2008-03-20/webkit-nightly1.jpg (After
load/reload)
[5] http://ericeggert.net/webkit/2008-03-20/webkit-nightly2.jpg (Resized
window, no reload)

*** Bug 17962 has been marked as a duplicate of this bug. ***

Created attachment 19929 [details]
Fix the logic for a float-clearing <br> at the end of a block

Fixed in <http://trac.webkit.org/projects/webkit/changeset/31213>.