Bug 67566
| Summary: | Wrong sizing of absolutely positioned form fields when both left/right are set | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Lea Verou <lea> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | bfulgham, hyatt, jonlee, phiw2, sdeonline, shanestephens, simon.fraser, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | 528+ (Nightly build) | ||
| Hardware: | All | ||
| OS: | All | ||
| URL: | http://jsfiddle.net/leaverou/PTxSE/4/show | ||
Lea Verou
Webkit treats form fields just like every other element and when both left and right are set, it stretches them horizontally to satisfy both declarations.
However this, convenient as it may be, is opposed to both what every other engine is doing AND the specification:
"The used value of ‘width’ and ‘height’ is determined as for inline replaced elements."
From http://www.w3.org/TR/css3-box/#abs-replaced
A blog post describing this issue: http://snook.ca/archives/html_and_css/absolute-position-textarea
It also happens with inputs: http://jsfiddle.net/leaverou/PTxSE/4/show
But not all replaced elements: http://jsfiddle.net/leaverou/PTxSE/3/show
It also doesn't happen with top/bottom, only left/right: http://jsfiddle.net/leaverou/PTxSE/5/show
I also tested on Windows, and it's reproducible there as well.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Mark Rowe (bdash)
Your test case for top/bottom does show the same behavior for top/bottom, it’s just not particularly visible because the height of the body element is only slightly larger than the textarea. If you increase the height of the body, either explicitly via height: 100% or by adding content to the element, then you’ll see the height of the textarea follow.
Daniel Scholtus
I believe this is solved…
Brent Fulgham
Safari and Chrome agree on behavior. Firefox does not match.
Radar WebKit Bug Importer
<rdar://problem/96913549>