Rauno: overflow und javascript display bug im Firefox

SELF-Forum

overflow und javascript display bug im Firefox

Rauno
– Informationen zu den Bewertungsregeln

Hallo zusammen,
ich entwickle gerade ein Konstrukt, bei dem ein Container innerhalb eines äußeren Containers per javascript bewegt werden kann. Der innere Container enthält noch weitere gefloatete container mit overflow: auto. Das overflow auto hier ist wichtig, darauf kann ich auf keinen Fall verzichten. Leider scheint dieses overflow auto auch dafür verantwortlich zu sein, dass der Firefox (relevant sind die Versionen 2 und 3) üble Darstellungsfehler produziert.

Ich habe das Szenario in einem Testcase verdeutlicht (bitte auf Firefox 2 und/oder 3 mit Javascript testen).

Kann mir jemand einen Workaround für dieses Problem vorschlagen?

Es handelt sich eindeutig um einen Browser-Bug (https://bugzilla.mozilla.org/show_bug.cgi?id=374675).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
<head>  
 <title>Overflow related display bug</title>  
 <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js"></script>  
 <style type="text/css">  
 div#other  
 {  
  position: absolute;  
  left: 0;  
  top: 100px;  
  width: 120px;  
 }  
  
 div#outer  
 {  
  position: absolute;  
  left: 121px;  
  top: 100px;  
  width: 300px;  
  height: 100px;  
  border: 2px solid red;  
  overflow: hidden;  
 }  
  
 div#inner  
 {  
  overflow: hidden;  
  width: 6000px;  
 }  
  
 div.content  
 {  
  float: left;  
  margin-left: 10px;  
  width: 100px;  
  heigth: 100px;  
  background: green;  
  overflow: auto;  
 }  
  
 div.content p  
 {  
  padding: 2px;  
  color: white;  
 }  
  
 </style>  
</head>  
<body>  
 <!-- script to move the inner container-->  
 <script type="text/javascript">  
 function moveContent(offset){  
  $("div#inner").stop().animate(  
   { marginLeft:  parseInt($("div#inner").css("margin-left"))+offset+"px"},  
   {  
    duration: 200  
   }  
  );  
 }  
 </script>  
  
<p><a href="javascript:moveContent(-20);">Scroll left</a>&nbsp;|&nbsp;<a href="javascript:moveContent(20);">Scroll right</a></p>  
<div id="other">  
 <p>  
 Aenean vel mi. Donec blandit mauris convallis lacus. Sed a urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus hendrerit. Curabitur libero leo, laoreet nec, lobortis in, auctor malesuada, metus. Vivamus ultrices eros eget pede. Morbi facilisis leo ut elit. Fusce viverra iaculis risus. Pellentesque posuere faucibus sem. Praesent et felis ac lorem laoreet venenatis.  
 </p>  
</div>  
<div id="outer">  
 <div id="inner">  
  <div class="content">  
   <p>1. Etiam pede. Sed et orci quis nulla condimentum suscipit. Fusce quam lectus, tincidunt quis, gravida vel, interdum non, quam. Phasellus nibh pede, rhoncus id, bibendum non, eleifend sit amet, dui. Integer non nibh quis magna elementum condimentum.</p>  
  </div>  
  <div class="content">  
   <p>2. Etiam pede. Sed et orci quis nulla condimentum suscipit. Fusce quam lectus, tincidunt quis, gravida vel, interdum non, quam. Phasellus nibh pede, rhoncus id, bibendum non, eleifend sit amet, dui. Integer non nibh quis magna elementum condimentum.</p>  
  </div>  
  <div class="content">  
   <p>3. Etiam pede. Sed et orci quis nulla condimentum suscipit. Fusce quam lectus, tincidunt quis, gravida vel, interdum non, quam. Phasellus nibh pede, rhoncus id, bibendum non, eleifend sit amet, dui. Integer non nibh quis magna elementum condimentum.</p>  
  </div>  
  <div class="content">  
   <p>4. Etiam pede. Sed et orci quis nulla condimentum suscipit. Fusce quam lectus, tincidunt quis, gravida vel, interdum non, quam. Phasellus nibh pede, rhoncus id, bibendum non, eleifend sit amet, dui. Integer non nibh quis magna elementum condimentum.</p>  
  </div>  
 </div>  
</div>  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. weitere Infos und Code-Korrektur

    Olaf Schneider Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo,

    noch einige Anmerkungen von meiner Seite:

    Der Bug tritt unter Windows auf und unter Mac OS X nicht. Linux wurde bis jetzt nicht getestet.

    Unter FF3 gibt es Darstellungsfehler nur während der Animation.

    Unter FF2 bleiben Darstellungsfehler auch nach der Animation erhalten. Wenn man mit [CTRL][A] alles selektiert, so werden die Fehler durch das Neuzeichnen  beseitigt.

    In den Code hat sich ein kleiner Fehler eingeschlichen: In der css-Deklaration für div.content heißt es natürlich height und nicht heigth.

    Gruß
    Olaf

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln