Ticket #11635 (closed bug: fixed)
Explicit overflow:auto is overridden by inline overflow:hidden during animation
| Reported by: | yonjah@… | Owned by: | petro |
|---|---|---|---|
| Priority: | high | Milestone: | 1.next |
| Component: | effects | Version: | 1.8.2 |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
Description
This might be two bugs or one (I'm not really sure).
jQuery will use the following method (line 1612) ->
// Check if elements with layout shrink-wrap their children // (IE 6 does this) div.style.display = "block"; div.style.overflow = "visible"; div.innerHTML = "<div style='width:5px;'></div>"; support.shrinkWrapBlocks = ( div.offsetWidth !== 3 );
unfortunately this will fail on new browsers if document style settings will set all elements to use "box-sizing:border-box" ( I only tested it in chrome 18 but will probably repeat it self with any border-box supported browsers)
I wouldn't have noticed this issue if jQuery animation wouldn't set my animated elements overflow to hidden and but then fail to remove them when animation ends (line 8892) ->
if ( options.overflow != null && !jQuery.support.shrinkWrapBlocks ) {
jQuery.each( [ "", "X", "Y" ], function( index, value ) {
elem.style[ "overflow" + value ] = options.overflow[ index ];
});
}
I don't know what the original IE6 bug was that this flag tried to solve, but this seems to be the only place that it's used. and it would seem wierd that this is a desired action even on IE6 (chnaging original overflow settings and not restoring them when animation ends).
Yoni.
Change History
comment:1 Changed 13 months ago by rwaldron
- Owner set to yonjah@…
- Priority changed from undecided to low
- Status changed from new to pending
- Component changed from unfiled to effects
comment:3 Changed 13 months ago by rwaldron
- Status changed from pending to closed
- Resolution set to fixed
comment:4 Changed 13 months ago by yonjah@…
Fiddle test code -> http://jsfiddle.net/GEZ4B/
(this is using JQuery edge so I'm not sure if this is really resolved in 1.8)
comment:5 Changed 13 months ago by rwaldron
- Priority changed from low to high
- Status changed from closed to reopened
- Resolution fixed deleted
- Milestone changed from None to 1.8
Confirmed. Further reduced:
comment:6 Changed 13 months ago by rwaldron
- Summary changed from Bad layout shrink-wrap detection / JQuery will not remove overflow:hidden from animated elements to Explicit overflow:auto is overridden by inline overflow:hidden during animation
Updating title to make sense
comment:8 Changed 13 months ago by rwaldron
- Status changed from reopened to closed
- Resolution set to fixed
Thanks scott. I tested this with 1.8pre http://jsfiddle.net/rwaldron/aXAE8/ and there is no longer an issue
comment:10 Changed 13 months ago by rwaldron
you're* :P
comment:11 Changed 9 months ago by yonjah@…
just updated jQuery to v1.8.1 and this issue is still happening
comment:12 Changed 7 months ago by timmywil
- Status changed from closed to reopened
- Resolution fixed deleted
- Milestone 1.8 deleted
comment:13 Changed 7 months ago by timmywil
- Status changed from reopened to open
- Version changed from 1.7.2 to 1.8.2
- Milestone set to 1.next
comment:14 Changed 7 months ago by timmywil
overflow: hidden is left there.
comment:15 Changed 7 months ago by elgreg
#12456 is a duplicate of this ticket.
comment:16 Changed 7 months ago by elgreg
- Owner changed from yonjah@… to petro
- Status changed from open to assigned
comment:17 Changed 7 months ago by petro
Updated test case: http://jsfiddle.net/mpetrovich/cpw9J/
comment:18 Changed 7 months ago by Mike Petrovich
- Status changed from assigned to closed
- Resolution set to fixed
Fixes #11635, Explicit overflow:auto is overridden by inline overflow:hidden during animation, closes gh-981
Changeset: 861476eb3fb5e378fdbb4e86e4737daf6de27f13
comment:19 Changed 5 months ago by mikesherov
#12630 is a duplicate of this ticket.
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

Thanks for taking the time to contribute to the jQuery project! Please provide a complete reduced test case on jsFiddle to help us assess your ticket!
Additionally, be sure to test against the "jQuery (edge)" version to ensure the issue still exists. To get you started, use this boilerplate: http://jsfiddle.net/FrKyN/ Open the link and click to "Fork" (in the top menu) to begin.