Chrome 30 and the width of elements of type display: table-cell?

Question

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?

EDIT:

Ok I found a workaround. clientWidth still works as expected, so calculating the width by...

var width = document.getElementById( "testCell" ).clientWidth;

...will do the job. However I would still be interested in knowing what is going on here, if anyone has info.

Thanks!

Answer 1

I'm having similar issues.

I think the problem is a regression in chrome 30.

See https://code.google.com/p/chromium/issues/detail?id=290399 .

Another post about this exists here: Calculated width wrong in Chrome, fine in FFox / IE?

Chrome 30 and the width of elements of type display: table-cell?

Question

1 answers

solution1
0 2013-10-08 14:33:02

Chrome 30 and the width of elements of type display: table-cell?

Question

1 answers

solution1 0 2013-10-08 14:33:02

solution1
0 2013-10-08 14:33:02