Skip to main content

Bug Tracker

Side navigation

#12854 closed bug (duplicate)

Opened November 06, 2012 09:37AM UTC

Closed December 29, 2012 03:47AM UTC

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

Reported by: contact@bigbossmas.com Owned by:
Priority: low Milestone: None
Component: effects Version: 1.8.2
Keywords: Cc: gnarf
Blocked by: Blocking:
Description

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.

Attachments (0)
Change History (5)

Changed November 21, 2012 10:09PM UTC by dmethvin comment:1

cc: → gnarf
component: unfiledeffects
priority: undecidedlow

Changed December 03, 2012 09:24AM UTC by fiveop comment:2

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.

Changed December 04, 2012 10:26AM UTC by contact@bigbossmas.com comment:3

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.

Changed December 04, 2012 04:09PM UTC by anonymous comment:4

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)

Changed December 29, 2012 03:47AM UTC by mikesherov comment:5

resolution: → duplicate
status: newclosed

Duplicate of #12630.