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: | 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
Cc: | gnarf added |
---|---|
Component: | unfiled → effects |
Priority: | undecided → low |
comment:2 follow-up: 3 Changed 10 years ago by
comment:3 Changed 10 years ago by
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
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)
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.