🔊 I'm running ffconf: UK's best JS & webdev conf. Find out more & get tickets 📢

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.


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


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="#">
    <p>p nested in a section wrapped in a link</p>

The resulting DOM is as such:

<a href="#">
  <a href="#">p nested in a section wrapped in a link</a>
<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: http://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?

Posted 10-Aug 2009 under bug & debug & debugging & dom & html & html5 & web.

I am Remy Sharp

I'm a JavaScript developer working professionally on the web since 1999. I run my own consultancy, build products, run training, speak at conferences and curate the UK's best JavaScript event.


Posts, web tech insights, exclusive workshop and training discounts and more, direct to your inbox.