Absolute positioning element 100% width inside relative positioned container bug in webkit - css

Question

I've used this positioning trick a bit to achieve complex outcomes. I think I've come across a bug in webkit browsers which I'm struggling to understand.
Here is the simple markup:
<table>
<tbody>
<tr>
<td>
<div>
<span class="cols-6"></span>
</div></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
and CSS:
*, *:after, *:before {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
tr {
border: 1px solid #ddd;
}
td {
vertical-align: top;
padding: 0;
height: 100px;
border: solid #ddd;
border-width: 1px 0 0 0;
box-shadow: -1px 0px #ddd;
}
td div {
position: relative;
}
td div span.cols-6 {
position: absolute;
width: 600%;
height: 20px;
background: #ccc;
}
To see this in action, open up this http://jsfiddle.net/JFxqt/14/ in chrome.
The displayed span is absolutely positioned inside a relative container. As the table uses fixed layout, its cells are all fixed width, hence a child should be able to make use of a percentage width. The table has 7 columns while the span's width is set to 600% (i.e. 6 columns * 100%). It fails to cover all 6 columns in webkit browsers. Firefox and IE renders fully across all specified columns.
Ideally setting the span's width to 100% should render across 1 column, 200% across 2 columns and so on.
Anyone have any ideas or workarounds?

Answer 1

Try this: http://jsfiddle.net/JFxqt/3/
I changed this around in your CSS:
body{margin:0px}
td div {
}
span.cols-6 {
position: absolute;
width: 85.6%;
height: 20px;
background: #ccc;
z-index:10;
top:0;
left:0;
}

Answer 2

You are seeing a cross-browser issue related to how the widths of table cells are computed and inherited. This may be either a bug or something that is not specified explicitly by the CSS specifications and left to the browser to decide.
In Firefox, the width of <td> is inherited by the <div> whereas in the webkit (Chrome) browser, the width inherited by the child <div> is 1px smaller.
When you multiply by 100% and 200%, you won't see an effect, but by the time you get to the last cell at 700%, you see about a 7px gap.
If you are building a CSS framework, you will need to create a style for Firefox browsers and another for webkit browsers.
For the case of 6 columns, I found the following would work:
td div span.cols-6 {
position: absolute;
left:-1px;
width: 600%;
border-right: 6px solid #ccc;
height: 20px;
background: #ccc;
}
I add a right border that is 600% x 1px = 6px and then position the span to the left by -1px. For another number of columns, for example, .cols-3, you would need width: 300% and border-right: 3px solid #ccc and so on.
You may need to use some type of a CSS filter or selector hack. I did find the following reference: http://browserhacks.com
No clean or elegant solution for this problem unfortunately.

Answer 3

Well after a day or two searching for workarounds it would seem a conditional JS enhancement for Webkit browsers is the only viable solution.
The problem stems from Webkits (and Opera's old rendering engine) calculation of percentage widths, which are always rounded down to the nearest pixel as opposed to being stored as a double. Therefore in Webkit a 1px descrepancy may be added for every factor of 100% (eg 2300% - 100% * 23 - will have a maximum of 23px discrepancy), while Firefox and later versions of IE can only have an overall maximum of 1px discrepancy.
John Resig touched on this issue a while ago, http://ejohn.org/blog/sub-pixel-problems-in-css/