Wir arbeiten bei 3st gerne mit eleganten JavaScript-Effekten wie dem Aufklappen von Navigationsebenen. Natürlich setzen wir dafür Frameworks ein – meine Wenigkeit schwört auf jQuery, während sich Kollege Stanislav für prototype und Script.aculo.us begeistert – aber das tut hier gar nichts zur Sache.
Ein Problem gibt es bei der ganzen schönen Animationsgeschichte. Und dieses Problem ist so speziell, dass es wohl fast keinem (Kunden) auffällt, dem geübten Netzgrafiker aber dennoch Bauchschmerzen bereitet. Ich versuche, es in einem Satz zu beschreiben.
Beim Einsatz der Transparenz-Eigenschaft in JavaScript wird das Font-Rendering in Gecko-basierten Browsern unter Mac OS X beeinflusst, so dass alle benachbarten Elemente ein verändertes Schriftbild erhalten, sobald an einem beliebigen DOM-Element etwas an der Transparenz verändert wird.
Zur Illustration hier eine kleine GIF-Animation:
Falls jemand weiß, woran das liegt und wie man das beheben kann: Immer her damit!
Kommentare (7) 29.05.2007, gerritvanaaken
Feed abonnieren
Das Problem tritt aber im Safari und im Opera nicht auf!
hmmm, sicher, dass es nicht ein generelles problem mit dem anti-aliasing vom Mac ist? siehe diesen beitrag: http://www.eoghanmccabe.com/naive-by-design/how-to-fix-the-mac-os-x-text-problem-with-css/
Waah! Ein animiertes Gif!
Bitte, bitte… hab mich gerade erst vor kurzem mit herumgeschlagen ;)
Wow, vielen Dank, Nico – das nenne ich mal einen Workaround :-) Funktioniert sehr gut!
Das Problem ist tatsächlich ein bekannter Bug und tritt durch die Verwendung der Eigenschaft “opacity” auf, dies führt zu Problemen in aktuellen Gecko-Versionen auf Mac. (jQuery bspw. verwendet beim fading opacity-Werte bis zu .99 (auch wenn man 1 als Ziel auswählt).
Die Lösung ist eigentlich sehr einfach: man gebe den Ebenen, die Veränaderungen zeigen von Anfang an eine opacity von “.9999”. Dies kann man bspw. direkt auf “body” ausführen. In diesem Fall wird auch die etwas zu starke Zeichnung, die Geckos den Fonts mitgeben aufgehoben.
Diese Lösung funktioniert allerdings nicht, wenn Flash im Spiel ist. Hängt man Flash-Embeds auf Ebenen mit einer opacity < 1 ein, kommt es zu massiven Darstellungsproblemen. Im äußersten Notfall auf $.fadeTo verzichten und $.show verwenden (dann ist zwar der Effekt weg, aber eben auch der Bug).
Hi,
danke, dass Du das Thema ansprichst. Es kommt bei mir öfters vor und es nervt. Da ich bisher keinen Ansatz auf das Problem hatte, konnte ich auch nicht recherchieren.
Vor allem bei Symfony (PHP Framework) kommt es in der Development Environment vor. Denn hier verwendet das WebDebug-Panel einen halbtransparenten Hintergrund.
Bitte! kennt jemand eine Lösung?