I’m using jQuery to fade in an <article> element which contains a <section> element.

Question

0

Editorial Team

Asked: May 25, 20262026-05-25T16:32:48+00:00 2026-05-25T16:32:48+00:00

I’m using jQuery to fade in an <article> element which contains a <section> element.

0

I’m using jQuery to fade in an <article> element which contains a <section> element.

Outside element is display:none, position:fixed, and z-index:5. Inside element is position:absolute.

Basically the article gives a frame and the inside section holds the content and has a scrollbar.

I’m fading in the outside element and expecting the inside to follow suit.

In IE9+, FF, and Chrome it works as expected.

In IE8- it does not. The outside article doesn’t fade in at all – remains invisible, and the inside section is positioned relative to the browser frame and is always visible. Other elements on the page are all skewed and the page becomes mostly non-functional.

Code samples:

article
{
  display: none;
  position: fixed;
  z-index: 5;
}

section
{
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  overflow: auto;
}

and

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <article id="contentFrame">
      <section id="content">
        Lorem Ipsum
      </section>
    </article>
  </body>
</html>

and