Width problem in Chrome

Forum Moderators: not2easy

Message Too Old, No Replies

Width problem in Chrome

Chrome incorrectly expands 0-width elements

luismartin

8:59 pm on Dec 1, 2011 (gmt 0)

I'm coding an accordion with Javascript, but I'm having a problem with CSS in Chrome.

This is a collapsed tab in the accordion:

<div class="tab">

 <div class="tab-button" style="cursor: pointer;">
  <span>2011</span>
 </div>

 <div class="tab-content" style="width: 0px; opacity: 0;">
  .... // content with a fixed width of 400px
 </div>

</div>

I've checked with Firebug that in Firefox the container div (div.tab) has the width of div.tab-button, since div.tab-content has zero width and no opacity.

However this doesn't happen in Chrome. The width of div.tab keeps having the internal width (400px) despite the width and opacity of div.tab-content are forced to zero.

What could I do to fix this? I tried by adding visibility:hidden too, but no way.

Any help would be appreciated.

Paul_o_b

12:05 am on Dec 2, 2011 (gmt 0)

Have you tried overflow:hidden on the zero width element?

luismartin

1:04 pm on Dec 2, 2011 (gmt 0)

Yes, I've tried overflow:hidden with this element (div.tab-content) and even with all the descendants and ancestors (div.tab and div.accordion), and the inner contents are still forcing the zero width container to remain the same width as its children.

I'm not sure which behaviour (Firefox or Chrome) is responding properly to the standards, but I need to have it fixed for all of them.

Paul_o_b

7:06 pm on Dec 2, 2011 (gmt 0)

Ok, I can see an issue in webkit and it certainly looks like a bug as the width should not expand if the element has zero width.

If you are trying to hide the element then display:none or position absolute and position offscreen will make the elements behave as normal.

Otherwise if you must have that width:0 for some reason then you could offset the width with a negative margin.

e.g.


.tab-content{width:0;margin-right:-400px;}

That should make chrome behave but check it doesn't have adverse effects.

luismartin

10:41 am on Dec 3, 2011 (gmt 0)

Hello Paul, and thanks for helping! How did you figure out it is a bug in Chrome?

Your solution would work in my case if I didn't have to use a gradual slide effect when a tab is opened/closed. I've also tried with the negative margins, and it statically works, but not during the slide effect.

My final solution, or at least temporal, until I get something better, was to apply a similar width animation to the parent (div.tab) besides the one I made for div.tab-content. In this case the collapsed width wouldn't be 0, but the width of div.tab-button which is always visible.

In addition, I had to do this only if the browser was Chrome, so I had to filter it with a condition.

I get it working. This doesn't affect FF/IE, and Chrome displays the accordion correctly.

However there is an ugly flicker in Chrome during the slide effect. So I'm yet not satisfied with my solution.

Paul_o_b

6:23 pm on Dec 3, 2011 (gmt 0)

It's certainly a bug because an element with zero width that has content of 400px width should still remain at zero width. The content should overflow the container as per the default (overflow:visible) and have no effect on surrounding content (except to overlap).

It looks like chrome has forgotten that the overflowing content was contained inside an element of zero width.

Actually, on testing again the bug is actually the zero width itself. If you change it to width:1px then chrome shrinks the parent to match. Change it to zero and the element expands.

Definately a bug :)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.tab{float:left;background:red;}
</style>
</head>

<body>
<div class="tab">
<div class="tab-button" style="cursor: pointer;"> <span>2011</span> </div>
<div class="tab-content" style="width: 1px;">
<p style="width:400px"> .... // content with a fixed width of 400px</p>
</div>
</div>
</body>
</html>

You should log a bug at the Chrome site or it won't get fixed.

luismartin74

7:31 pm on Dec 5, 2011 (gmt 0)

Thanks a lot Paul! You've been very helpful.

Maybe the 1 pixel width will work temporarily, as all the affected backgrounds are white. I'll test it.

And yes, I'm going to report the bug right now :)

Best regards!

Luis.

alt131

1:23 pm on Dec 6, 2011 (gmt 0)

Hi luismartin74, welcome to WebmasterWorld :)

And good spotting as usual Paul.