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.

Book nowModern Universal React with Next.js

Stop worrying about configuration, and complex codebases: Next.js makes SSR with React easy. Book your masterclass today.


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:

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?

Want more?

Posts, web development learnings & insights, exclusive workshop and training discounts and more, direct to your inbox.

I won't send you any spam, and you can unsubscribe at any time. Powered by ConvertKit