Chrome CSS issue with absolute positioned input elements inside of relative parents (Chrome 32.0.1700.77) right: 0 not working

Question

I just noticed this issue after an auto update to Chrome 32.0.1700.77. I can set top, left, and bottom in an absolutely-positioned input element, however right: 0 is ignored. Here's my code:

<div id="content">
    <input type="search"/>
</div>

#content {
    position: relative;
    top: 24px;
    height: 24px;
    background-color: gray;
}

#content input[type="search"] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* width 100%; */
}

Fiddle: http://jsfiddle.net/hAuSL/4/

It was working as expected before the update. I also see this issue in Firefox (26.0) but not in Opera (18.0.1284.68) or Safari (7.0.1 (9537.73.11)).

I can work around it by adding width: 100% to the input element style; but I'm wondering, is there something wrong with the CSS or is this a browser issue?

Thanks in advance for any insights.

Answer 1

It's not a bug, see how absolutely positioned replaced elements' width is computed:

http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width

The used value of 'width' is determined as for inline replaced elements.

http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width

if 'width' has a computed value of 'auto', and the element has an intrinsic width, then that intrinsic width is the used value of 'width'.

At this point the element dimensions are over-constrained (it has width, left and right) so the following rule applies:

ignore the value for either 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.

It's what you see, right is ignored. As <input> always have a default width you should set yours (100% in this case) and remove the right rule.

---

For a more generic solution you can wrap the replaced element in any non-replaced element (like a <div>) which will be absolutely positioned with left and right, then you can set the wanted width for the other element (be careful, if the box-model is content-width the width value will be added to any padding and border).

See http://jsfiddle.net/2UaYm/ for example.