Multiple annotation markers on the same content overlap

Steps to reproduce:

1. Create a document with the following content:

   Some test content.

2. Select and annotate "test". The rendered output is:

   <div id="xwikicontent" class="col-xs-12">
     <p>
     Some
     <span class="annotation ID0 annotation-highlight">test</span>
     <span id="ID0" class="annotation-marker SAFE"></span>
     content.
     </p>
   </div>
   

3. Select and annotate "test" again. The rendered output is:

   <p>
     Some
     <span class="annotation ID0 annotation-highlight">
     <span class="annotation ID1 annotation-highlight">test</span>
     </span>
     <span id="ID0" class="annotation-marker SAFE"></span>
     <span class="annotation ID1 annotation-highlight"></span>
     <span id="ID1" class="annotation-marker SAFE"></span>
     content.
   </p>
   

4. At this point, both annotation-markers are displayed in the same location, one over another and we can only hover to see a single annotation (the most recent one) even if 2 annotations exist there.
   
5. In the Comments tab, both annotations are properly displayed.

See the attached xar with the example above.