Skip to main content

Bug Tracker

Side navigation

#4872 closed bug (invalid)

Opened July 09, 2009 01:09PM UTC

Closed July 26, 2011 08:06AM UTC

Last modified March 13, 2012 05:56PM UTC

Animate function and flash move in Firefox

Reported by: Nyro Owned by: Nyro
Priority: low Milestone: 1.next
Component: effects Version: 1.5.2
Keywords: flash overflow Cc:
Blocked by: Blocking:
Description

While animating an element by setting new width or height which contains a flash movie, this flash movie is reloaded.

This occurs only in Firefox.

I tested it with IE8, Safari4, Chrome 2 and Opera 9 all on Vista.

After a quick investigation, it looks like it's coming from these lines:

if ( opt.overflow != null )
	this.style.overflow = "hidden";

I simply removed them to test and the problem doesn't occur anymore.

Attachments (0)
Change History (18)

Changed July 22, 2009 07:52PM UTC by Joust comment:1

Possibly duplicate of #4628 :) Yeah, it break and restarts flash every time, on firefox, when animating. It's the same all since 1.2.x or even before that.

Please fix it already.

Changed October 08, 2009 12:13AM UTC by mickyhulse comment:2

I love jquery, but this bug has been a tough one to swallow.

For now, I will minimize an altered version with changes stated in Nyro's post.

It would be great to see this fixed. :)

Changed October 08, 2009 12:29AM UTC by mickyhulse comment:3

I just tested the fix on my latest project, and it works perfectly in via OS X 10.5.8 in these mac browsers:

Firefox 3.5.3 (was not working before)

Safari 4.0.3

Opera 10.00 build 6652

Vista OS:

Firefox 3.5.3

Firefox 3.0.11

IE 7.0.60002.18005

IE 8.0.6001.18813

Changed October 13, 2009 02:58PM UTC by Nyro comment:4

Does anybody of the jQuery team looked at this bug?

Will it be solved in the next release?

Changed October 13, 2009 10:57PM UTC by mickyhulse comment:5

Hi!

I have done several more tests and, from what I can tell, it looks like IE8 is the browser that needs the overflow set...

Not sure why I did not notice it before, but when I removed the overflow from the jQuery source, the animation in IE8 was not working smoothly (if at all)...

My fix:

I reverted back to an un-altered version of jQuery and then added this to my CSS:

#billboard { overflow: auto !important; }

Now FF is happy and IE8 is too!!!

You could even use IE conditional comment to feed IE8 an overflow of hidden.

Anyway, I tested in the latest versions of these browsers:

OS X: Safari, Opera, Firefox

Vista: Safari, IE7, IE8, Firefox

XP: IE6 (via VPC emulator)

Not sure if this fix will help others, but I like this solution much better than modifying the jQuery source. :)

Changed October 26, 2009 11:07PM UTC by kcoop comment:6

That's a good workaround, thanks. It saves me having to maintain a hacked copy of jquery.

But this is still a bug. In addition to the flash problem, it also creates blinky scrollbars if auto has already been specified.

You can't just remove those lines, since they help keep content clipped for generic animations. But you can easily test for whether the element has overflow already specified:

if ( opt.overflow != null && !/hidden|auto/.test($(this).css('overflow')))
	this.style.overflow = "hidden";

There's probably a more efficient way to get that css...

Changed November 13, 2010 07:26AM UTC by addyosmani comment:7

#4628 is a duplicate of this ticket.

Changed November 13, 2010 07:31AM UTC by addyosmani comment:8

#4831 is a duplicate of this ticket.

Changed November 15, 2010 12:54AM UTC by SlexAxton comment:9

keywords: → flash overflow
milestone: 1.41.5
priority: majorlow
status: newopen

Keeping open, would love someone to provide a patch on github for this one.

Changed February 23, 2011 03:17PM UTC by anonymous comment:10

Same problem ! same fix ?

I've just add an overflow css rule applying to to the animated tag.

#youranimatedtag {

overflow: hidden;

}

It works !

Changed April 17, 2011 07:55PM UTC by timmywil comment:11

blocking: → 8880

Changed April 17, 2011 07:56PM UTC by timmywil comment:12

milestone: → 1.next
version: 1.3.21.5.2

Changed April 18, 2011 07:38PM UTC by timmywil comment:13

blocking: 88808880, 8903

Changed April 25, 2011 08:36PM UTC by giovannipds comment:14

How I fix it on my project:

JavaScript:

$(document).ready(function() {
	$.noData = {};
});

Cascading Style Sheets:

#the-flash-tag {
	display: inline-block;
	overflow: hidden;
}

Changed April 30, 2011 05:58PM UTC by timmywil comment:15

blockedby: → 8903
blocking: 8880, 89038880

(In #8903) This has to do with the marginRight hook.

Changed July 11, 2011 07:51PM UTC by dmethvin comment:16

blocking: 8880, 8903
owner: → Nyro
status: openpending

It sounds like we can't fix this inside jQuery in a reasonable way. The first step would be that we need a test case. Can someone provide one?

Changed July 26, 2011 08:06AM UTC by trac-o-bot comment:17

resolution: → invalid
status: pendingclosed

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!

Changed September 05, 2011 09:21AM UTC by retio comment:18

Flash will overlay any HTML content by default, but this can be prevented by setting the 'wmode' param and embed attributes to 'transparent'.

<param name="wmode" value="transparent" />

Fix my problem.