Weird z-index behaviour on Android 2.3

Question

I think I may have come across another z-index bug in Android 2.3. We have this widget, which renders like this on all major OS/browser combos:

Here's the HTML we're using:

<ol>
    <li>
        <span class="ranking">1</span>
        <h3>
            <a href="...">TT Legends shows the exhilaration of motorbike racing</a>
        </h3>
        <span class="score-bar" style="width: 610px;"></span>
    </li>
    <li>
        <span class="ranking">2</span>
        <h3>
            <a href="...">101-year-old grandmother 'comes back from the dead'</a>
        </h3><span class="score-bar" style="width: 421px;"></span>
    </li>
</ol>

and this is the CSS:

.trending ol {
    counter-reset: item;
    list-style-type: none;
    overflow: hidden;
}

.trending li {
    position: relative;
    min-height: 42px;
    margin-bottom: 10px;
    overflow: hidden;
}

.trending .ranking {
    display: table-cell;
    vertical-align: middle;
    min-width: 40px;
    text-align: center;
}

.trending h3 {
    display: table-cell;
    vertical-align: middle;
    position: relative;
    z-index: 2;
    width: 100%;
    margin-left: 40px;
    padding: 5px;
    line-height: 1.2;
}

.score-bar {
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40px;
    width: 0;
    z-index: 0;
    background: #f3f5f9;
}

We use JS to set the width of the blue .score-bar span according to the score of the item concerned.

On Android 2.3 devices like the HTC Desire and Samsung Galaxy S2 it ends up like this:

Can anyone suggest a solution? I've tried all the CSS tweaks I can think of, but nothing seems to fix it.

Answer 1

What you need to do is move the .score-bar background styling to something other than the span.

Delete the score-bar spans, and use the following instead.

Here is the jsfiddle example... http://jsfiddle.net/qaYbS/

NOTE: In jsfiddle I used background color, for your instance you will need to use an actual image. Just make an image that is the height you need and 1px wide and use that. It won't increase load times at all. This is the only way to get the width of the background to shrink accordingly. You can constrain the size of a background color.

.trending li:nth-child(1) {
    background: red;
    background-image: ;
    background-size: 610px 20px;
    background-position: 40px 0px;
}
.trending li:nth-child(2) {
    background: blue;
    background-image: ;
    background-size: 421px 20px;
    background-position: 40px 0px;
}
.trending li:nth-child(3) {
    background: green;
    background-image: ;
    background-size: 300px 20px;
    background-position: 40px 0px;
}
.trending li:nth-child(4) {
    background: orange;
    background-image: ;
    background-size: 200px 20px;
    background-position: 40px 0px;
}
.trending li:nth-child(5) {
    background: purple;
    background-image: ;
    background-size: 100px 20px;
    background-position: 40px 0px;
}