chrome v 32 - html elements size issue

Question

After the chrome 32 update, the width of the html elements (input, select,..) defined by a css with these properties does not work:

position:absolute;
left:10px;
right:20px;

In chrome 31 and all others browsers it works.

Look at this with chrome 32

http://jsfiddle.net/EAkLb/7/

Answer 1

I guess this is what W3C says as the correct way of rendering input elements (I said I guess and I dindn't put the W3C spec link because I didn't found the official link for it)

A simple workarround is to create container div with the position absolute and the left and right attributes and create an input inside with width: 100%;

<div class="container">
    <input type="text"/>
</div>

<style type="text/css">
    .container {
        position:absolute;
        left:10px;
        right:20px;
    }
    .container input {
        width: 100%;
    }
</style>

like in http://jsfiddle.net/pjK8s/1/

If you need to put padding than you need to style the container to looks like the input and let the input be transparent

<div class="container">
    <input type="text"/>
</div>

<style type="text/css">
    .container {
        position:absolute;
        left:10px;
        right:20px;
        padding: 1px 8px;
        margin: 2px 0px;
        -webkit-appearance: textfield;
    }
    .container input {
        width: 100%;
        border: 0px;
        margin: 0px;
        padding: 0px;
        background: transparent;
        outline: none;
    }
</style>

like in http://jsfiddle.net/Vyj22/1/