Solved

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

Posted on 2008-06-13
10
751 Views
Last Modified: 2013-11-19
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
Comment
Question by:xpsi
  • 7
  • 3
10 Comments
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21780404
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
 

Author Comment

by:xpsi
ID: 21780486
@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
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21780494
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
Three Reasons Why Backup is Strategic

Backup is strategic to your business because your data is strategic to your business. Without backup, your business will fail. This white paper explains why it is vital for you to design and immediately execute a backup strategy to protect 100 percent of your data.

 

Author Comment

by:xpsi
ID: 21780698
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
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21781756
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
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21781809
set overflow:auto;

I just used firebug and set your page to auto - it seemed to fix it
0
 
LVL 10

Accepted Solution

by:
bluefezteam earned 500 total points
ID: 21781825
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
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21781868
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
 

Author Comment

by:xpsi
ID: 21782195
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
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21782318
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

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question