JS-Dynamic Change of Overflow Causes Repaint in Firefox

A bug regarding the CSS property: overflow, and Firefox

[AlishahNovin]

I've seen this bug a few times crop up in my web development, but I've always had suitable workarounds (usually involving changing some part of my layout rather than resolving the issue directly.)

Here's the issue:

Dynamically changing a div's overflow property with JS causes the contents of that div to repaint/re-render - *only* in Firefox. In IE the div's overflow property resizes and the contents are not re-rendered.

As I said, usually this is a resolvable issue, or one that doesn't affect functionality too much (ie, it may just cause the contents to flicker as they reload, but that's it).

However, if you have a Flash item contained in this div, and then pro grammatically change the div's overflow property this means the Flash movie will return to it's original starting state - again this does not happen with IE.

I've done very bare-bones testing on this, with a simple:

<div id="overflow_div" style="overflow:hidden;">
<flash object>
</div>
<a href="javascript:change_overflow();">Change Overflow</a>

<script language="javascript" type="text/javascript">
function change_overflow() {
overflow_div = document.getElementyById('overflow_div');
overflow_div.style.overflow = (overflow_div.style.overflow=="hidden")? visible : "hidden";
}
</script>

Clicking the 'Change Overflow' causes the Flash object to return to its initial state in FF, but not in IE. This can be very frustrating when you're trying to create a dynamic experience with Flash and the Page interacting with one another...

So my question is simply:

Is there any known resolution to this?

-OR-

Is there any reason why this issue *still* exists in FF?

Thanks in advance!
Alishah Novin

[mikegioia]

I may be missing something, but what is the purpose of setting and resetting the overflow property to hidden or visible?

What I took from that code was that you were trying to show or hide the div content, and if thats the case, why not try setting and resetting the CSS display property instead.

Sorry if I'm misunderstanding you.

Mike