Positionierungsfehler bei opacity != 1 in Firefox (?)

[Olaf Schneider]

Hallo,

Für die Textpositionierung auf einer Fotowebsite benutze ich als Einheit em, soweit möglich. Damit ist klar, dass der Browser bei der Umrechnung in Pixel runden muss.

Jetzt passiert aber folgendes: Unter bestimmten Umständen, die vermutlich die Rundung beeinflussen, weicht die Positionierung der Texte auf dem Firefox 2 (sowohl Mac als auch PC) abhängig von dem opacity-Wert ab.

Bei opacity < 1 ist die Position dann um einen Pixel nach links oder oben verschoben im Vergleich zu opacity = 1.

Da die opacity zum Überblenden benutzt wird, ist es natürlich störend, wenn die Texte leicht springen.

Setze ich opacity auf .9999 statt auf 1, so tritt dieser Fehler nicht mehr auf, allerdings gibt es dann minimale Farbabweichungen in den Bildern, die ich gerne vermeiden würde.

Hatte jemand von Euch dieses Problem schon einmal und hat einen Workaround gefunden?

Gruß
Olaf

P.S.: IE bekommt natürlich seinen hübschen Filter statt der nicht unterstützten opacity-Eigenschaft.

[Struppi]

Jetzt passiert aber folgendes: Unter bestimmten Umständen, die vermutlich die Rundung beeinflussen, weicht die Positionierung der Texte auf dem Firefox 2 (sowohl Mac als auch PC) abhängig von dem opacity-Wert ab.

Bei opacity < 1 ist die Position dann um einen Pixel nach links oder oben verschoben im Vergleich zu opacity = 1.

Könntest du mal ein Beispiel zeigen?
Ich hab das bisher noch nicht beobachtet.

Struppi.

[Olaf Schneider]

Hallo Struppi,

Könntest du mal ein Beispiel zeigen?

Sicher: Du kannst http://test-opacity.olafschneider.de/test.html aufrufen und dann einfach auf eines der bunten Felder klicken.

Der Fehler tritt vertikal bei der <h2> unter den Feldern und horizontal in der Breadcrumb ganz unten auf, aber auf Grund der Seitenzentrierung nur bei bestimmten Viewportgrößen.

Gruß
Olaf

[Struppi]

Könntest du mal ein Beispiel zeigen?

Sicher: Du kannst http://test-opacity.olafschneider.de/test.html aufrufen und dann einfach auf eines der bunten Felder klicken.

Dann kommt bei mir eine Fehlermeldung?
Sowohl im Browserfenster:

XML-Verarbeitungsfehler: "Junk" nach Dokument-Element
Adresse: http://test-opacity.olafschneider.de/update.xml
Zeile Nr. 8, Spalte 1:<h2>This is page two with another caption</h2>

Als auch in der Konsole:

Fehler: "Junk" nach Dokument-Element
Quelldatei: http://test-opacity.olafschneider.de/update.xml
Zeile: 8, Spalte: 1
Quelltext:
<h2>This is page two with another caption</h2>^

Den von dir beschriebenen Effekt kann ich nicht sehen.

Struppi.

[Olaf Schneider]

Hallo Struppi,

Dann kommt bei mir eine Fehlermeldung?
Sowohl im Browserfenster:

XML-Verarbeitungsfehler: "Junk" nach Dokument-Element
Adresse: http://test-opacity.olafschneider.de/update.xml
Zeile Nr. 8, Spalte 1:<h2>This is page two with another caption</h2>

dieser Fehlermeldung kann ich nur zustimmen. Die xml-Datei ist in wirklichkeit ein xml-Fragment.

Dass dieser Fehler auftaucht, ist allerdings ein Zeichen dafür, dass das Javascript im onclick-Handler einen Fehler wirft und durch den Scriptabbruch der html-Link verfolgt wird.

Den von dir beschriebenen Effekt kann ich nicht sehen.

Siehst Du denn einen Teil des Überblendens oder wird vom Browser direkt update.xml angefordert?

Bei mir funktioniert das Script bis auf den beschriebenen Darstellungsfehler mit Firefox 2 problemlos. Welcher Browser hat bei Dir zu den Fehlermeldungen geführt?

Gruß
Olaf

[Struppi]

Den von dir beschriebenen Effekt kann ich nicht sehen.

Siehst Du denn einen Teil des Überblendens oder wird vom Browser direkt update.xml angefordert?

Nein und Ja.

Bei mir funktioniert das Script bis auf den beschriebenen Darstellungsfehler mit Firefox 2 problemlos. Welcher Browser hat bei Dir zu den Fehlermeldungen geführt?

FF 2.0.0.3

Struppi.

[Olaf Schneider]

Hallo Struppi,

ich benutze FF 2.0.0.11, allerdings auf dem Mac. Ich werde jetzt noch einmal FF 2 PC checken und mich dann noch einmal melden.

Gruß
Olaf

[Jonathan]

Hallo Olaf,

ich benutze FF 2.0.0.11, allerdings auf dem Mac. Ich werde jetzt noch einmal FF 2 PC checken und mich dann noch einmal melden.

Mein Firefox liefert

Error: uncaught exception: [Exception... "Not enough arguments [nsIXMLHttpRequest.send]"  nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)"  location: "JS frame :: http://test-opacity.olafschneider.de/res/js/main.js :: anonymous :: line 68"  data: no]

Jonathan

[Olaf Schneider]

Hallo Jonathan,

Mein Firefox liefert

Error: uncaught exception: [Exception... "Not enough arguments [nsIXMLHttpRequest.send]"  nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)"  location: "JS frame :: http://test-opacity.olafschneider.de/res/js/main.js :: anonymous :: line 68"  data: no]

der Fehler ist korrigiert. Die send-Methode erhält jetzt als Parameter null.

Seltsam, dass das auf dem aktuellen Firefox 2.0.0.11 unter Mac OS X keine Probleme machte.

Gruß
Olaf

[Struppi]

der Fehler ist korrigiert. Die send-Methode erhält jetzt als Parameter null.

.. und ich kann keine Veränderung der Position feststellen.

Struppi.

[Dennis]

Hi Struppi,

.. und ich kann keine Veränderung der Position feststellen.

Firefox 2.0.11, Win XP SP 2 - ich kann das „Hüpfen” der Texte unter den farbigen Feldern nachvollziehen, allerdings in der Tat nur bei bestimmten Fenstergrößen.

Nur als Anmerkung, falls es euch weiterhilft ;-)

Viele Grüße,
  ~ Dennis.

[Glory]

Könntest du mal ein Beispiel zeigen?

Sicher: Du kannst http://test-opacity.olafschneider.de/test.html aufrufen und dann einfach auf eines der bunten Felder klicken.

Dann kommt bei mir eine Fehlermeldung?
Sowohl im Browserfenster:

XML-Verarbeitungsfehler: "Junk" nach Dokument-Element
Adresse: http://test-opacity.olafschneider.de/update.xml
Zeile Nr. 8, Spalte 1:<h2>This is page two with another caption</h2>

Reproduziert mit Firefox 2.0.0.11 auf Linux (Debian).

[Olaf Schneider]

Hallo Glory, hallo Struppi,

Reproduziert mit Firefox 2.0.0.11 auf Linux (Debian).

ich muss, glaube ich, erst einmal feststellen, warum die Animation auf der Testseite auf meinem Rechner läuft, aber auf Eurem nicht.

Zur Zeit noch ideenlose Grüße,
Olaf

[shn]

Servus,

im Gegensatz zu den anderen kann ich das Beispiel problemlos nachvollziehen (FF 2.0.0.11/WinXP).

Ein Grund für das "springen" könnte (Vermutung, nicht getestet) sein, dass du die Zeilenhöhe in Kartoffeln angegeben hast, Firefox aber möglicherweise mit Teelöffeln rechnet.

Gruss
Patrick

[Olaf Schneider]

Hallo Patrick,

Ein Grund für das "springen" könnte (Vermutung, nicht getestet) sein, dass du die Zeilenhöhe in Kartoffeln angegeben hast, Firefox aber möglicherweise mit Teelöffeln rechnet.

Ich benutze als Einheiten natürlich Feen (pixies oder kurz px) und Verzauberte Magier (enchanted magicians oder kurz em). Dass Firefox zwischen Feen und Magiern umrechnen muss, ist mir klar. Aber wie zum Donnerdrummel hängt das mit der Eigenschaft opacity zusammen, die ja nicht gerade eine Positionierungsangabe ist.

Gruß
Olaf

[shn]

Servus,

Ich benutze als Einheiten natürlich Feen (pixies oder kurz px) und Verzauberte Magier (enchanted magicians oder kurz em).

Gut gekontert ;)
Allerdings hast du für line-height nirgendwo eine Angabe zur Einheit, z.B. line-height:1.2727;

Wie das ganze nun mit opacity zusammenhängt, vermag ich nicht zu beurteilen. Möglicherweise bildet sich Firefox ein, bei voller Deckkraft sei das imaginäre Glas Whiskey noch voll; demnach ist er nicht besoffen genug, rumzuraten welche Einheit du gerne hättest ;)

Gruss
Patrick

[Olaf Schneider]

Hallo Patrick,

Allerdings hast du für line-height nirgendwo eine Angabe zur Einheit, z.B. line-height:1.2727;

das ist bei line-height auch zugelassen.

Wie das ganze nun mit opacity zusammenhängt, vermag ich nicht zu beurteilen. Möglicherweise bildet sich Firefox ein, bei voller Deckkraft sei das imaginäre Glas Whiskey noch voll; demnach ist er nicht besoffen genug, rumzuraten welche Einheit du gerne hättest ;)

Ich werde wohl doch bei einigen Werte px verwenden und ein bisschen herumrunden, um das Problem zu umgehen.

Gruß
Olaf

[Olaf Schneider]

Hallo Struppi, Patrick, Jonathan und Glory,

ich habe jetzt das Layout ein wenig verändert (offline) und damit das Problem umgangen, da ich nicht zu viel Zeit in etwas stecken wollte, von dem ich nicht weiss, ob eine Lösung überhaupt existiert.

Euch allen vielen Dank für die Fehlersuche und Ratschläge.

Schöne Grüße,
Olaf