webkit shows bullet behind floated elements in list

Answer 1

A pseudo element, with a CSS counter for ol list can be used to avoid bug and use of borders

span {
  float: left;
  width: 200px;
}
ol {
  counter-reset:marker;
  }
li {
  counter-increment:marker;
  list-style-type:none;
  box-shadow:0 2px gray;
  }
li:before {
  content:'\02022 ';
  padding-right:0.25em;
  float:left;
  }
ol li:before {
  content:counter(marker)'. ';
  }
hr ~* li:before {
  text-indent:-1em;
  }
li:after {
  content:'';
  display:table;
  clear:both;

<ul>
  <li><span>test</span></li>
  <li><span>test</span></li>
</ul>
<ol>
  <li><span>test</span></li>
  <li><span>test</span></li>
</ol>
<hr/>
<ul>
  <li><span>test</span></li>
  <li><span>test</span></li>
</ul>
<ol>
  <li><span>test</span></li>
  <li><span>test</span></li>
</ol>

Answer 2

As pointed out by @silviagreen this is a webkit-specific bug but as a workaround I suggest to add a transparent border to the list-item. This seems to properly work (but I honestly admit that I can't figure out why this should work)

li {
   border: 1px transparent solid;
}

https://jsfiddle.net/rjkz7ny1/

---

Other approaches suggest to change float: left into display: inline-block or to give clear: left to the list, but I feel these workarounds a bit too substantial (and not always appliable) than adding a trasparent border.