Bug Tracker

Opened 10 years ago

Closed 10 years ago

#12854 closed bug (duplicate)

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

Reported by: [email protected] 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.

Change History (5)

comment:1 Changed 10 years ago by dmethvin

Cc: gnarf added
Component: unfiledeffects
Priority: undecidedlow

comment:2 Changed 10 years ago by 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.

comment:3 in reply to:  2 Changed 10 years ago by [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.

comment:4 Changed 10 years ago by 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)

comment:5 Changed 10 years ago by mikesherov

Resolution: duplicate
Status: newclosed

Duplicate of #12630.

Note: See TracTickets for help on using tickets.