With div set to border-box sizing, toggle and slideToggle effects add overflow:hidden to the element at all times

[[email protected]…]

Came across an issue trying to implement slideToggle effect to show/hide an unordered list. There is no issue with Firefox, but on other browsers (chrome, safari, opera, and IE), bullet list style doesn't show. It seems overflow:hidden is applied to the toggled element and doesn't go away even when it's shown. After much troubleshooting, traced the problem to this - which seems completely unrelated:

div {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box; 
}

the code is very simple:

  <h4 class="grow-link">Click Here.</h4>
  <ul class="grow">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
    <li>List Item 5</li>
  </ul>

<script>
  jQuery('.grow').hide();	
  jQuery('.grow-link').click(
    function() {
      jQuery(this).next().slideToggle('fast');
      return false;
    }
  );
</script>

See the test page here: ​http://www.bigbossmas.com/test/slidetoggle.html

Workaround for now is to apply border-box style to div inside the container: ​http://www.bigbossmas.com/test/slidetoggle-fix.html

Same issue for toggle effect as well.

[fiveop]

Firefox 17.0 produces the same behaviour and I think it should. The bullets of a list are rendered in the margin (if there is any) of the ul box, unless you set list-style-position to 'inside'.

This is not an issue with jquery. If you use overflow: 'hidden' and list-style-position: 'outside', then you will always lose the bullets.

[[email protected]…]

I disagree and you seems to be missing the point. The issue is that if you set div {box-sizing:border-box} in a CSS then jquery will ADD overflow:hidden to the element that has toggle or slidetoggle effect on. AND this doesn't happen if you don't set box-sizing:border-box on divs.

I don't see any reason why jquery should add overflow:hidden to the element when animation is complete and the element is 100% shown.

[anonymous]

I did misunderstand the issue. I looked at the problem again in Chromium and saw the missing bullets.

I think the problem is that, jQuery only resets the overflow attribute of the element again, if jquery.support.shrinkWrapBlocks is false (see ​here). (I wonder, why it is not reset in general)

Since the code setting shrinkWrapBlocks tests for certain values of 'width' of a div without looking at the box-sizing attribute, this might be the problem. (​support.shrinkWrapBlocks)

[mikesherov]

Duplicate of #12630.