Android 4.1.2 default browser - rendering issue with disabled input fields

Question

It seems like some versions of the default android Browser have a rendering issue. If I create a page where I have some sort of input field and a button, when I disable the other input field, the button appears grayed out (unless this is done on page load, you have to click around / zoom for a bit to get the browser to re-render).

The interesting thing is, it does not apply the disabled STYLE to the button, but simply grays it out. Here is a sample.

Link to editor jsfiddle
Link to embedded jsfiddle

CSS:

ul { list-style-type:none; }

.xxx {
    background: blue;
    color: white;
}

.xxx:disabled { background-color: red; }

HTML:

<div id="root">
    <ul>
        <li>
            <input name="x" id="enable" class="x" type="radio">Enable</input>
        </li>
        <li>            
            <input name="x" id="disable" class="x" type="radio">Disable</input>
        </li>            
    </ul>
    <input type="button" class="xxx" value="Button"></input>
</div>

JS:

$(function() {
    $('.x:eq(0)').prop('disabled', true);
});

Things to note:

• The button is NOT disabled. Click on it and it temporarily gets un-grayed-out.
• There is a style for the button's disabled state that sets its background color to red (if you disable the button, you will see this work), but the button does not appear red in the example, so it's not even just rendering the disabled style. It seems to mainly just set the opacity to a lower value
• A button BEFORE the radio buttons will not be affected. http://jsfiddle.net/YVFVZ/4/

Any ideas how to work around this?

Answer 1

I finally figured it out. I'm not really happy with this solution, but it seems to work.

If you wrap the inputs in a position: relative element, it fixes the problem.