Can't type within input because of webkit autofill

Question

I've searched high and low for a solution to this issue, I have a log in form that allows users to type within the inputs if they are logging in the first time but if they have logged in before and autocomplete is turned on it's impossible to click within the input fields and edit them. I'm seeing the 'cant type' cursor symbol over them. This is only happening in Chrome.

This isn't happening locally, only on my staging site which is also worrying as there's no differences between them (in terms of the html,css and js files).

I've tried a variety of fixes that I've found on here such as adding autocomplete="off" to my input tags. Also tried this bit of js which is a workaround for XHTML doctypes:

if (document.getElementsByTagName) 
{
    var inputElements = document.getElementsByTagName('input');

    for (i=0; inputElements[i]; i++) 
    {
        if (inputElements[i].className && (inputElements[i].className.indexOf('disableAutoComplete') != -1)) 
        {
            inputElements[i].setAttribute('autocomplete','off');
        }
    }
}

and this one too

if ($.browser.webkit) 
{
    $('input[name="password"]').attr('autocomplete', 'off');
}

The closest I've come to fixing this is if I inspect the input and change it's position to absolute/fixed it breaks the autocomplete and then if I change the positioning back to relative I can then type but obviously that's not really a solution it just shows that somehow autofill/autocomplete is the problem. Any help would be very much appreciated.

Answer 1

in the end what fixed this was setting position relative on the form and changing it's z-index,