background-color hiding before attribute in chrome android

Question

I have a :before pseudo element attached to an li tag like this:

li.selected:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 9999;
    margin-top: 0.9em;
    right: -0.9em;
    width: 1.7em;
    height: 1.7em;
    background-color: #ddd7d0;
    transform: rotate(45deg);
   -o-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
    box-shadow: -0.2em 0.4em 0.4em 0 rgba(0, 0, 0, 0.4), 0 0 0 0.6em transparent;
}

when I set a background-color to the li tag, the before hides and sometimed show up if I scroll the page.

What is wrong here?