IE 8 opacity: Bug? Versatz des Elementes um 1px und Änderung der Ebene??

Einklappen
X
 
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
  • zonky
    Wandelndes Contao-Lexikon
    • 19.03.2010
    • 10597

    #1

    IE 8 opacity: Bug? Versatz des Elementes um 1px und Änderung der Ebene??

    Hi,

    nach stundenlangem googlen habe ich nix brauchbares gefunden daher meine Frage hier, ob jemand sowas schonmal beobachtet hat... und ggf. eine Lösung ;-)

    Ich habe in einer ul-Liste in einem li ein a-Tag als Navigation, welches per Mootools beim Hover ein Fading bekommt (morph: opacity).

    Im FF und Safari - sogar im IE 7 alles prima nur im IE8 wird beim Überfahren der a-Block um ca. 1px verschoben und "angehoben". Dieser Effekt ist auch zu sehen, wenn man direkt im CSS einen Filter angibt z.B. filter: alpha(opacity=100);

    Die Sache wird beim Screenshot deutlicher - leider ist die Seite noch nicht freigegeben, so dass einen Link zum "leben Objekt" noch nicht geben kann.

    Der Screenshot ist eine Vergrößerung der Reiter (ul>li>a).

    Bei "Leistungen" sieht man an der unteren Kante den Versatz durch den Filter.

    ... jemand Ideen, wie man das wegbekommt?
    Angehängte Dateien
    MetaModels-Workshop: Anfragen möglich
    Erweiterungen: Infos im Seitenbaum, Formular-Default für Select/Checkbox/Radio (SCR), Formular-Newsletteranmeldung, Regex-Formularwidget, Lizenzmanager für Isotope
    Unterstützung per Github-Sponsoring: MetaModels Handbuch und Forum, e-spin Erweiterungen
  • tril
    Contao-Urgestein
    • 07.01.2010
    • 2939

    #2
    Spontane Idee: Die Elemente sind tatsächlich 1px zu groß, werden aber durch einen overflow:hidden abgeschnitten. Der IE8 legt aber beim setzen des opacity Filters das Element so weit nach oben, dass es nicht mehr durch den overflow:hidden abgeschnitten wird.

    Begründung: Es ist keine Verschiebung, das Element ist nur 1px größer als vorher. Die Oberkante und auch die Text-Baseline liegen nämlich weiterhin auf einer Höhe.

    Kommentar

    • zonky
      Wandelndes Contao-Lexikon
      • 19.03.2010
      • 10597

      #3
      Hi,

      die Elemente sind eigentlich noch größer und werden beim Faden noch per morph bewegt - die Bewegung kann ich abschalten und ich habe den gleichen Effekt.

      Wenn ich per CSS fix den a-Block mit
      Code:
      filter: alpha(opacity=50);
      definiere, sehe ich den "Vorsprung"

      wenn ich zum Test
      Code:
      -ms-filter:alpha(opacity=50);
      verwende ist alles prima...

      wenn ich - was eigentlich gleich sein sollte - dies verwende
      Code:
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
      ist es wieder fehlerhaft

      Eine Änderung des Doctype (Strict/Transitional) brechte keine Änderung...

      Soweit ich das im Mootool-Core sehen konnte, wird für MS filter eingesetzt - auch im neueren 1.3.0. Keine Ahnung, ob man das selbst "überschreiben/extenden" kann...??

      In Element.Properties.opacity wird nur der Filter gesetzt
      Code:
      ...
      if (Browser.Engine.trident) this.style.filter = (opacity == 1) ? '' : 'alpha(opacity=' + opacity * 100 + ')';
      ...
      ...hmmm???

      zonky
      MetaModels-Workshop: Anfragen möglich
      Erweiterungen: Infos im Seitenbaum, Formular-Default für Select/Checkbox/Radio (SCR), Formular-Newsletteranmeldung, Regex-Formularwidget, Lizenzmanager für Isotope
      Unterstützung per Github-Sponsoring: MetaModels Handbuch und Forum, e-spin Erweiterungen

      Kommentar

      • zonky
        Wandelndes Contao-Lexikon
        • 19.03.2010
        • 10597

        #4
        Hi,

        ich bin soweit eingestiegen, dass der IE8 beim setzen der Filter die ClearType-Funktion außer Kraft setzt - wieso das andere Browserhesteller schaffen aber die eingene Manschaft nicht, ist wohl M$-Geheimis...

        Bei Opacity 0 und 1 bzw. 100 bei IE wird der Cleartype wieder eingeschaltet - ggf. muss man den Filter löschen.

        Warum mein Element "größer" wird ist unklar - es ist nicht möglich, mit einem anderen Div die Sache "abzudecken" da z-index anscheinend bei Filter keine Bedeutung hat oder das Element "nach oben" wandert.

        Wenn die Seite Online ist, sende ich mal einen Link - zum Schmunzeln über den "SuperBrowser"

        zonky
        MetaModels-Workshop: Anfragen möglich
        Erweiterungen: Infos im Seitenbaum, Formular-Default für Select/Checkbox/Radio (SCR), Formular-Newsletteranmeldung, Regex-Formularwidget, Lizenzmanager für Isotope
        Unterstützung per Github-Sponsoring: MetaModels Handbuch und Forum, e-spin Erweiterungen

        Kommentar

        Lädt...