Member Avatar for SolidSolutions

In the bottom left of the content of the page is a link for "virtual prayer walk". If you click on that, an iframe is displayed.

In other browsers, you can navigate the iframe just fine (using the go forward/ go backward links).

In IE, it does not change the iframe right away. But, if you click the go forward, then click on the iframe scroll bar, it will change the iframe content.

I appreciate any help.

  • 1 Contributor
  • 1 Reply
  • 181 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by SolidSolutions

Dani AI

Generated

Nice catch, — that exact class of problem is a common IE gotcha. When an element is made fully transparent but left in the document flow (or when an older IE filter is used), it can still sit above an iframe in the stacking order and either block input or keep the browser from repainting the framed content immediately. That explains why the iframe only updated after you clicked the scrollbar: that interaction forced focus/repaint.

Practical fixes that avoid the issue:

  • Remove or take the transparent element out of the stacking context (put it behind the iframe or remove it from the DOM).
  • Hide it with display: none or visibility: hidden when the iframe needs to be interactive, instead of leaving it visually transparent.
  • If you need fade animations, remove the overlay as soon as the fade finishes (or remove it from the DOM) so it no longer blocks the iframe.
  • For modern browsers you can use pointer-events: none to allow clicks through an overlay, but older IE versions don’t support that reliably — prefer actually hiding/removing the element for those browsers.

If you need a quick programmatic repaint workaround in IE try toggling layout or forcing a reflow around the iframe (this nudges the renderer to update):

iframe.style.display = 'none';
iframe.offsetHeight;   // force reflow
iframe.style.display = '';

Debugging tips: use IE’s F12 tools to inspect computed styles and stacking order; temporarily add a bright background/border to suspected overlays to see if they cover the iframe; search for CSS filters or transition code that might be applying full transparency. This pattern — invisible overlay blocking or preventing repaint — shows up often; removing the overlay or changing the hide technique is usually the simplest, most robust fix.

Member Avatar for SolidSolutions

Ended up being a css opacity: 0; setting causing the problem.

You can see success at: http://www.gwftn.org/#projects and using the link in the lower left "virtual prayer walk"

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.