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.

UK EVENTAttend ffconf.org 2024

The conference for people who are passionate about the web. 8 amazing speakers with real human interaction and content you can't just read in a blog post or watch on a tiktok!

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?