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 comment:1
| cc: | → gnarf |
|---|---|
| component: | unfiled → effects |
| priority: | undecided → low |
Changed December 03, 2012 09:24AM UTC by 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 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 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)