How to get detect multiple markers with AR.js

I am trying to detect different markers. One is a pattern named and1painting.patt and the other is the preset 'hiro'

When I show the hiro pattern, it is detected by the and1painting.patt marker. E.g. in the following code, it always shows the blue box rather than red, when I show the hiro marker. Thoughts on why? I tried this with the sample1.patt that is already in the repo but it didn't work either.

<!doctype HTML>
<html>
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"> </script>
  <body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs='sourceType: webcam;'>
        <a-marker type='pattern' patternUrl='Data/and1painting.patt'>
            <a-box position='0 0.5 0' material='opacity: 0.5; side:double; color:blue;'>
            </a-box>
        </a-marker>
        <!-- handle marker with hiro preset -->
        <a-marker preset='hiro'>
            <a-box position='0 0.5 0' material='opacity: 0.5; side:double; color:red;'>
            </a-box>
        </a-marker>
        <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

Solution

Unfortunately AR.JS still is seriously broken at the moment: https://github.com/jeromeetienne/AR.js/pull/236

You can hack your way to a working solution, if you follow the comments in the issue.