問題: ブラウザのサイズを変更するまで画像が表示されない、または各画像の一部しか表示されない。ページがリロードされるたびに、結果はランダムになります。ページを 10 回リロードすると、10 の異なる結果が得られました。
ウィンドウのサイズを変更した後、ページのサイズを元のサイズに戻しても、ページは本来の外観とまったく同じように表示されます。
非常に単純な Web ページで問題が発生した後、
ここで js フィドル (問題なく動作):
ページのソースに加えることができる唯一の変更は、削除することであることがわかりました
<!DOCTYPE html>
他の変更は問題を解決しませんでしたが、そのタグを削除すると 100% 修正されます。どうしてこれなの？？
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css">
<title>Title</title>
<meta name="keywords">
<meta name="description" content="The GameMode Hub is a Minecraft Server Network bringing together all of Minecraft's best and brightest server owners to present the gaming community with the largest collection of Minecraft Servers in the world!">
<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="http://www.new.gamemode.org/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="http://www.new.gamemode.org/images/wall_right.png">
</div>
<!-- end wall right -->
<img class="welcome-logo" src="http://www.new.gamemode.org/images/logo.png">
<img class="welcome-shadows" src="http://www.new.gamemode.org/images/shadows_fast.png">
</div>
<!-- end welcome screen -->
</div>
<!-- end wrap -->
</body>
</html>
CSS:
/* Style Setup */
body, div {
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%;
}