• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 775
  • Last Modified:

Draw error in Firefox 2 with iframe in an overflow:hidden div

I'm experiencing a draw error in Firefox 2 with an IFRAME that gets moved into hidden overflow territory in a DIV element.

I have an example of the issue on this page:

http://www.mdxdata.com/rdemo/slider.html 

First wait for the IFRAME to load and then click the 'Slide' buttons to see what I mean. If you scroll up and down or minimize and restore the browser window, the artifacts go away which leads me to believe it's an error in the rendering engine of Firefox.

Without hiding the IFRAME (i.e., display:none or visibility:hidden), is there anyway to fix this?

Thanks!
0
xpsi
Asked:
xpsi
  • 7
  • 3
1 Solution
 
bluefezteamCommented:
The artifact is a swf movie, swfs can be awkward to work with due to their object model.

Apart from that your solution looks fine.

If it were possible you could try setting the flash movies proeprties as transparent, that sometimes helps. But again the only reason I see an artifact is the flash movie.
0
 
xpsiAuthor Commented:
@bluefezteam: I have a test case where the IFRAME does not contain a Flash movie and the same thing happens.

I've edited it to load google.com instead of aol.com. You'll still see the issue.

Thank you.
0
 
bluefezteamCommented:
definately the fact theres a flash movie on there; you are linking to AOL and it has a flash banner - as long as you dont use/link to flash movies I cant see any errors in your code.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
xpsiAuthor Commented:
Hmm, try clearing your cache. I edited the code to load a page on Google that definitely has no flash objects within. Still happens!
0
 
bluefezteamCommented:
I know it sounds stupid, but what happens if you float 2 white blocks eitherside of that gap, does the 'effect' still show through?
0
 
bluefezteamCommented:
set overflow:auto;

I just used firebug and set your page to auto - it seemed to fix it
0
 
bluefezteamCommented:
Just saved your page locally and I got it to work with the change in property

.waxon_main {
border:2px solid black;
overflow:auto;
}
.waxon_container {
position:relative;
}
.waxon_section {
float:left;
}
0
 
bluefezteamCommented:
Obviously I got a scroll bar across the bottom but it shows that it's related to that tag - we just need to find a way to hide that scroll bar in someway?

Maybe this needs to be a conditional fix - only if it's in firefox it switches the tag to auto?
0
 
xpsiAuthor Commented:
Very interesting observation!

I'm going to try this:

If I detect FF2 I'll set overflow to auto just for the animation part, and then set it back to hidden once it's done
0
 
bluefezteamCommented:
sounds a plan - you could also hover a white div over the scrollbar area? a bit over the top, but would hide it...

What a team!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 7
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now