CODEWITHSUNDEEP
javascripthtmlgoogle-chrome
dencey
dencey

Reputation: 1061

Chrome doesn't update the element's width at some condition, is it a bug?

Chrome Version: 23.0.1271.95 m Operating System: Windows 7 64 bit

Please check the test page in http://jsfiddle.net/CTdQd/2/ or source code blow.

In the page there is a parent div with style "display: inline-block; position: relative;" which has 3 children with different width and height. Only one of the children has a "relative" position , other two have "absolute" position. When switch the "relative" position among the 3 children, the parent div's height updates correctly but not width, its width doesn't change. It's OK in Firefox and IE. Is this a chrome bug?

<!DOCTYPE html>
<html>
<head>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type">
  <title>test</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <style>
    #wrap {
      border: 1px solid #F00;
      display:inline-block;
      position:relative;
    }
    .out {
      position:absolute;
      left: 0;
      top: 600px;
    }
    .out.in {
      position:relative;
      left: 0;
      top: 0;
    }
  </style>
</head>
<body>
  <div style="width:600px;height:400px;border:1px solid #DFDFDF;text-align:center;overflow:hidden;">
    <div id="wrap">
      <div id="item1" class="out in" style="width:200px;height:200px;background-color:#0F0;">200*200</div>
      <div id="item2" class="out" style="width:300px;height:100px;background-color:#00F;color:#FFF;">300*100</div>
      <div id="item3" class="out" style="width:400px;height:300px;background-color:#DDD;">400*300</div>
    </div>
  </div>
  <p id="log"></p>
  <div style="margin-top:10px;">
    <input type="submit" id="test1" value="show1">
    <input type="submit" id="test2" value="show2">
    <input type="submit" id="test3" value="show3">
  </div>
  <script>
    $(function() {
        $('input').click(function() {
            var parent = $('#wrap');
            $('.in').removeClass('in');
            $('.out').eq($(this).index()).addClass('in');
            $('#log').text('the parent div\'s width: ' + parent.width() + 'px, height: ' + parent.height() + 'px');
        });
    });
  </script>
</body>
</html>

Upvotes: 0

Views: 1410

Answers (1)

Dominic Cooney
Dominic Cooney

Reputation: 6545

I believe this is a bug in WebKit. I filed WebKit bug 104872 for this.

Upvotes: 0

Related Questions