Komischer Fehler in Google Chrome - Wie Fehlersuche?

[Michael Herm]

Hallo,

Der Fehler tritt nur bei Google Chrome auf. FF verhaelt sich wie erwartet. Der Fehler besteht darin, dass Chrome nach einer Auswahl aus einer Liste ganz nach oben scrollt. Wie kann man nach dem Fehler suchen, der das Ganze verursacht - es funktioniert alles, nur eben das die Liste (bestehend aus einzelnen div's) immer nach oben scrollt nach einer Auswahl.

Der Code sieht etwa so aus:

<div id="listbox" style="overflow:auto">
   <div class="item">
      <div>Eintrag</div>
      <div>Beschreibung</div>
   </div>
   <div class="item">
      <div>Eintrag</div>
      <div>Beschreibung</div>
   </div>
   <div class="item">
      <div>Eintrag</div>
      <div>Beschreibung</div>
   </div>
</div>

Am element #listbox haengt ein eventlistener der auf mausclick lauscht. Bei mausklick wird das entsprechende element mit class="item" ausgewaehlt und eine zusaetzliche klasse angehangen. Wie kann man auf Fehlersuche gehen, wenn Javascript Debugger keine Fehler melden??

Waere dankbar fuer Denkansaetze das Problem zu loesen.
Gruss Michael.

[Der Martin]

Hi,

Der Fehler tritt nur bei Google Chrome auf. FF verhaelt sich wie erwartet. Der Fehler besteht darin, dass Chrome nach einer Auswahl aus einer Liste ganz nach oben scrollt.

das hört sich an, als würdest du location.href den Wert "#" zuweisen.

<div id="listbox" style="overflow:auto">
   <div class="item">
      <div>Eintrag</div>
      <div>Beschreibung</div>
   </div>
   <div class="item">
      <div>Eintrag</div>
      <div>Beschreibung</div>
   </div>
   <div class="item">
      <div>Eintrag</div>
      <div>Beschreibung</div>
   </div>
</div>

Am element #listbox haengt ein eventlistener der auf mausclick lauscht. Bei mausklick wird das entsprechende element mit class="item" ausgewaehlt und eine zusaetzliche klasse angehangen.

Du meinst "angehängt".

Wie kann man auf Fehlersuche gehen, wenn Javascript Debugger keine Fehler melden??

Suche nach Zuweisungen an location.href, nach Links mit dem Ziel "#", oder nach Aufrufen von scrollTo() oder scrollIntoView().

Ciao,
 Martin

[Michael Herm]

Hi,

Danke fuer den Vorschlag.
Ich habe den Fehler lokalisieren koennen. Und zwar lag dieser bei den CSS Eigenschaften, die sich aenderten sofern die entsprechende Klasse hinzugefuegt wurde. Der div container erhielt den Wert opacity: 0.5. Warum Chrome dann nach oben "scrollt" ist mir ein Raetsel. Aber vermutlich ein Bug, wenn auch ein sehr merkwuerdiger. Ich habe opacity im stylesheet auskommentiert und siehe da, chrome verhaelt sich so wie man es erwartet. Aber darauf erst einmal kommen.

Vielen Dank

[Felix Riesterer]

Lieber Michael Herm,

die Liste (bestehend aus einzelnen div's)

wiebitte?? Eine Liste ist entweder ein <ul> oder <ol>-Element und beinhaltet <li>-Elemente.

Für Deinen Anwendungsfall ist eine http://de.selfhtml.org/html/text/listen.htm#definition@title=Definitionsliste wohl am sinnvollsten:

<dl id="listbox">  
    <dt>Eintrag</dt>  
    <dd>Beschreibung</dd>  
    <dt>Eintrag</dt>  
    <dd>Beschreibung</dd>  
    <dt>Eintrag</dt>  
    <dd>Beschreibung</dd>  
</dl>

Na? Sieht doch gleich besser aus! Deine inline-Styles kannst Du mithilfe der ID gleich ganz ins CSS verpacken und die class="item"-Attribute komplett entsorgen, da hier semantische Elemente verwendet werden. Das sollte sich im CSS sehr leicht anpassen lassen.

Liebe Grüße,

Felix Riesterer.

[Michael Herm]

Hi,

den Fehler habe ich mittlerweile lokalisieren koennen. Es lag an einem CSS Wert (opacity), der durch die neue Klasse hinzugefugt wurde. Ein feiner bug den Chrome da hat, aber darauf erst einmal kommen.

die Liste (bestehend aus einzelnen div's)

wiebitte?? Eine Liste ist entweder ein <ul> oder <ol>-Element und beinhaltet <li>-Elemente.

Nun ja, das mag sein fuer semantische Web-Dokumente. Es ist aber nicht empfehlenswert, list Elemente zu verwenden, wenn die Liste komplexer Natur. Zum einen sind die Gestaltungsmoeglichkeiten beschraenkt oder und man muss insbesondere darauf achten, dass jeder Browser andere Standard-Werte fuer das Listen design hat. Viele wichtiger aber, list Elemente sind verdammt langsam!!!! Vergleicht man die Scrollgeschwindigkeit von langen Listen (mit etwas komplexeren design), so kann mann feststellen, dass die Browser nicht so fluessig scrollen, als wenn man es mit div container definiert. Und bei Listen mit mehr als 300 Eintraegen merkt man das sehr stark (insbesondere bei Tablet Browsern). Gleiches macht uebrigens auch google etwa bei seinen Applikationen, wo Listen allgemein aus div containern bestehen.

Gruss

[molily]

Hallo,

Nun ja, das mag sein fuer semantische Web-Dokumente. Es ist aber nicht empfehlenswert, list Elemente zu verwenden, wenn die Liste komplexer Natur. Zum einen sind die Gestaltungsmoeglichkeiten beschraenkt oder und man muss insbesondere darauf achten, dass jeder Browser andere Standard-Werte fuer das Listen design hat. Viele wichtiger aber, list Elemente sind verdammt langsam!!!! Vergleicht man die Scrollgeschwindigkeit von langen Listen (mit etwas komplexeren design), so kann mann feststellen, dass die Browser nicht so fluessig scrollen, als wenn man es mit div container definiert. Und bei Listen mit mehr als 300 Eintraegen merkt man das sehr stark (insbesondere bei Tablet Browsern). Gleiches macht uebrigens auch google etwa bei seinen Applikationen, wo Listen allgemein aus div containern bestehen.

Mit Verlaub, das ist samt und sonders nicht korrekt, was du da erzählst.

Du kannst sämtliche HTML-Elemente mittels CSS so formatieren, wie du willst. Es gibt keine Beschränkung der Gestaltungsmöglichkeiten bei UL/OL. Sie können genauso wie ein DIV formatiert werden.

Es ist kein Problem und mit ein paar Regeln getan, Listen browserübergreifend einheitlich zu formatieren. Es ist nicht signifikant komplizierter, als DIVs zu formatieren.

Ob du UL-, OL-, DIV- oder PUSEMUCKEL-Elemente verwendest, das hat auf die Scrollgeschwindigkeit überhaupt keinen Einfluss. Wenn du derartiges feststellst, so machst du etwas anderes falsch. Jedenfalls liegt es höchstwahrscheinlich nicht an der Auszeichnung mit UL/OL an sich, sondern eher am besagten »komplexen Design« (z.B. Schatteneffekte, Hintergrundverläufe, Transformationen, abgerundete Ecken und ähnliches CSS3-Eye-Candy).

Dem Browser ist es erst einmal egal, ob ein Container-Element UL, OL, DIV oder PUSEMUCKEL heißt. Er verbindet damit lediglich CSS-Formatierungen in seinem Standard-Stylesheet. Da unterscheiden sich UL und DIV etwa nicht groß. UL hat vielleicht einen anderen display-Wert und gegebenenfalls einen margin-left-Wert. Das ist alles. Nichts, was die Performance des Browsers in die Knie zwingen könnte. Nichts, was man nicht im Autoren-Stylesheet überschreiben könnte.

Dass Google irgendwo DIVs anstatt Listenelemente verwendet, hat sicher keine Performance-Gründe. Die Google-Suche verwendet für die Suchergebnisse übrigens eine stinknormale Liste. Und die Google-Webanwendungen sind für schlimmes Markup bekannt. Ein Button besteht z.B. nicht aus einem button-Element, sondern aus 10 DIVs. Semantik bringen die höchstens mit WAI-ARIA-Attributen hinein.

Mathias