Defining The Vomit Bug

The more I test HTML 5 and the more I play around in the DOM, the more I find odd situations that will trigger particular bugs.

The one result I'm seeing is what I'm now referring to as a vomit bug.

Definition

Vomit bug: When the browser's parser rearranges the DOM completely differently to the markup, resulting in content being placed outside its original container.

Examples

For example, due to a bug in Firefox 3.5.2 (and perhaps before) the following markup is subject to the vomit bug:

<a href="#">
  <section>
    <p>p nested in a section wrapped in a link</p>
  </section>
</a>

The resulting DOM is as such:

<a href="#">
  <section></section>
</a>
<p>
  <a href="#">p nested in a section wrapped in a link</a>
</p>
<a href="#"></a>

This is a particular bug in Firefox that triggers when it parses a section element nested inside an a element that causes all currently open element to close, and the contents of the section element has been "corrected" by the browser and the DOM rearranged.

Note that by using the html5.enable option in Minefield renders correctly.

You can see a live example here: https://jsbin.com/upiza

The old Gecko engine (for Camino and Firefox 2) suffers from the same vomit bug when introducing new (or HTML5) elements (which can be fixed by serving as XHTML).

What other vomit bugs have you found?

Defining The Vomit Bug

Definition

Examples

Comments