Chrome 30 and the width of elements of type display: table-cell?
I'm experiencing a problem with with the latest beta version of Chrome
(30.0.1599.14 beta.)
I cannot calculate the true width of elements of type display: table-cell.
Here is some test code that outputs the width of a table cell to the
console as the browser window is resized:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.table {
background: #ffc;
display: table;
width: 100%;
}
.cell {
display: table-cell;
width: 200px;
border: 1px solid black;
background: #ff0;
height: 30px;
}
#testCell {
background: #f00;
}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).on( "ready", function() {
$(window).on( "resize", function() {
var width = document.getElementById( "testCell"
).offsetWidth;
// non jQuery way, for testing:
// var width = document.getElementById( "testCell"
).offsetWidth;
console.log( width );
});
});
</script>
</head>
<body>
<div class="table">
<div class="cell" id="testCell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell" ></div>
</div>
</body>
</html>
In latest versions of Safari and Firefox as well as in Chrome 29, this
works as expected. That is to say, even though the width is set in css,
because it is a table-cell element, the actual width is whatever fills the
parent table element. So the value will change as the browser window is
resized.
However in Chrome 30, even though it renders properly, the width outputted
to the console is always the css value: 200.
This is a problem for certain scripts of mine that need to calculate the
true width of table-cells for layout purposes.
Any ideas what is going on here, and how I can get it to work in Chrome 30?
Thanks!
No comments:
Post a Comment