Something seems off with this page when it loads. It only displays correctly after resizing the browser window. Random combinations appear before the resize, which is quite strange.
Can anyone identify what's causing this issue?
Here's the JS fiddle link for reference: http://jsfiddle.net/grDvW/1/
The images aren't loading properly, and even the placeholders don't appear until resizing the output window in the JS fiddle. At least the problem is consistent.
Here's the HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css"><title>GameMode | Minecraft</title>
<meta name="keywords" content="keyword">
<meta name="description" content="description">
<meta name="author" content="Jonathan Todd">
</head>
<body>
<div class="wrap"><!-- begin wrap :: this will keep all of the stuff neat and in one place -->
<div class="login-screen bg-dirt"><!-- begin login screen, background dirt :: sets up a background for the login and styles it with a dirt tile and holds all login elements -->
</div><!-- end login screen, background dirt -->
<div class="welcome-screen"><!-- begin welcome screen :: this will hold the elements within the welcome screen, mainly just a title and the two moving wall pieces -->
<div class="wall-left"><!-- begin wall left :: must I explain this? It opens and closes with the other wall -->
<img src="images/wall_left.png">
</div><!-- end wall left -->
<div class="wall-right"><!-- begin wall-right :: must I explain this? It opens and closes with the other wall -->
<img src="images/wall_right.png">
</div><!-- end wall right -->
<img class="welcome-logo" src="images/logo.png">
<img class="welcome-shadows" src="images/shadows_fast.png">
</div><!-- end welcome screen -->
</div><!-- end wrap -->
</body>
</html>
And here's the simple CSS code:
/* Style Setup */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin: 0;
padding: 0;
-webkit-perspective: 6500;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
address, caption, cite, code, dfn, th, var {
font-style: normal;
font-weight: normal;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
q:before, q:after {
content: '';
}
abbr, acronym {
border: 0;
}
.wrap, html {
width: 100%;
margin: 0px;
padding: 0px;
height: 100%;
overflow: hidden;
}
/* Style Start */
.bg-dirt { }
.login-screen {
z-index: 0;
}
.welcome-screen {
z-index: 1;
width: 100%;
height: 100%;
}
.wall-left {
position: absolute;
z-index: 2;
height: 100%;
left: 0px;
}
.wall-right {
position: absolute;
z-index: 3;
height: 100%;
right: 0px;
}
.welcome-logo {
position: absolute;
z-index: 4;
margin-left: auto;
margin-right: auto;
}
.welcome-shadows {
position: absolute;
z-index: 5;
width: 100%;
}