nicht angemeldet
IE8 friert ein bei div-Skalierung per js
Hallo,
ich wäre dankbar für ein paar Hinweise bei dem folgenden Problem, bei dem ich als Laie mittlerweile nicht mehr weiterkomme.
Das Ziel ist, eine website mit bescheidenem Layout zu konstruieren, auf der die angezeigten Elemente und die Schriftgrößen beim Verändern der Fenstergröße so skaliert werden, daß kein Scrollen notwendig ist (außer, wenn bestimmte Minimal-Werte unterschritten werden). Ein Freund, der sehr viel mehr Erfahrung mit html hat, hat mir geholfen, das Grundgerüst (mitsamt CSS) aufzusetzen und er hat auch das Java-Script für das Skalieren geschrieben; ich habe dann eigentlich nur noch die divs ein wenig neu strukturiert.
Das hat prinzipiell alles ganz wie gewünscht funktioniert - zumindest auf Chrome und Firefox. Allerdings habe ich dann auf IE8 feststellen müssen, daß es beim Verändern der Fenstergröße öfter dazu kam, daß der ganze Browser (und teilweise auch die Windows-Benutzeroberfläche) für ein paar Momente lang einfror. Auf einem zweiten, älteren Rechner habe ich die Beobachtung gemacht, daß das Einfrieren dort sehr viel länger dauern kann (mitunter zehn Sekunden und mehr).
Ich habe dann mit dem Debugging begonnen und habe die kleinstmögliche Version des Codes herausgezogen, in der der Fehler noch auftritt:
----dbug.html----
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>debug</title>
<meta content="text/html;charset=UTF-8" http-equiv="Content-type" />
<link rel="STYLESHEET" type="text/css" href="dbug.css">
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico" />
<link rel="SHORTCUT ICON" href="favicon.ico" />
</head>
<body onResize="neu()" onload="neu()" id="alex">
<script type="text/javascript" src="dbug.js"></script>
Alles
<div id="wrap">Oben
</div>
<div id="foot">Unten
</div>
</body>
</html>
----dbug.css----
*{margin:0;padding:0;}
html{margin:0px;padding:0px;height:100%;}
body{margin:0px;padding:0px;height:100%;background-color:#efefef;font: 1em Arial;overflow-y:auto;color:#444444;background:#efefef;}
a{text-decoration:none;color:#000099;}
a:hover{color:#2244a9;}
#wrap{position:relative;width:100%;min-width:1000px;background:#abc;height:60%;overflow-x:hidden;}
#foot{position:relative;width:100%;min-width:1000px;background:#def;height:40%;clear:both;margin-top:0em;z-index:-1;}
#transition{width:100%;position:absolute;height:100%;}
----dbug.js----
function neu(){
var breite = window.innerWidth || // alle Browser
(window.document.documentElement.clientWidth || // IE im Standard-Mode
window.document.body.clientWidth); // IE im Quirks-Mode
if(breite<1000){breite=1000;};
var hoch_neu=breite/2;
var wrap_neu=hoch_neu*0.6;
var foot_neu=hoch_neu*0.4;
document.getElementById('wrap').style.height=wrap_neu+"px";
document.getElementById('foot').style.height=foot_neu+"px";
}
--------
Nun kommt der Punkt, an dem ich nicht mehr weitersehe. Abgesehen von der rabiaten (und ziemlich sinnlosen) Methode, an dieser Stelle das Aufrufen der Script-Funktion innerhalb des Body-tags herauszunehmen, kann ich den Fehler auch dadurch verschwinden lassen, daß ich den "wrap"-div (und nur den) auskommentiere. Soweit ich es sehen kann, gibt es aber zwischen den beiden divs "wrap" und "foot" weder wichtige Unterschiede im html-code selbst noch im CSS. Auch, wenn ich die Reihenfolge der beiden divs vertausche, bleibt es dabei: sobald "wrap" drin ist, ist auch der Fehler da, sobald "wrap" raus ist, ist der Fehler weg.
Ich bin etwas ratlos. Einmal sehe ich in der Berechnung des Scripts nichts, was irgendwie gefährlich sein könnte - es ist ja eigentlich alles ziemlich simpel. Dann finde ich die Abhängigkeit zum "wrap"-div sehr verwirrend, denn ich kann beim besten Willen nicht erkennen, was ihn vom "foot"-div unterscheidet. Zuletzt kommt noch die Tatsache dazu, daß sich das Problem bisher auf den IE zu beschränken scheint, und ab dieser Stelle fehlt mir einfach zu viel Hintergrundwissen.
Um den Fehler zu sehen, klickt man am besten auf die untere rechte Ecke des Browserfensters und fährt dann eine Weile wild über den Bildschirm. Es kann etwas dauern dauern (wahrscheinlich in Abhängigkeit zur Systemleistung), aber bisher kam der Fehler bei mir zuverlässig nach unter dreißig Sekunden zum Vorschein.
Der Fehler scheint den Browser auch überdurchschnittlich oft (allerdings nicht zwingend) genau dann einzufrieren, wenn die untere Fensterkante mit der horizontalen Grenze der beiden divs "zusammenstößt". Außerdem kann man das Einfrieren anscheinend durch Drücken einer beliebigen Taste abbrechen - es kann allerdings genausogut sein, daß das reiner Zufall ist und der Fehler bisher immer so ziemlich dann auch schon vorbei war, als ich reagiert und eine Taste gedrückt habe; überprüfen kann ich das ja dummerweise schlecht.
Über ein paar nützliche Hinweise freut sich
Appz