I am currently using jQuery to create a smooth fade-in effect for an <article> element that contains a <section> element.
The outer element has CSS properties of display:none, position:fixed, and z-index:5. Meanwhile, the inner element is styled with position:absolute.
Essentially, the article acts as a frame while the section houses the content and includes a scrollbar.
Upon fading in the outer element, I expect the inner element to also become visible.
This setup works smoothly on IE9+, FF, and Chrome, but encounters issues on older versions of IE. In IE8- the outer article does not fade in at all, remaining invisible, while the inner section is incorrectly positioned relative to the browser window causing other elements on the page to appear skewed, rendering the page mostly non-functional.
Here are snippets of the code:
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
$("#contentFrame").fadeIn(2000);