Mitleser: IE 11 Bug border-image / transform - Workaround?

Hohoh!

Folgendes Fiddle soll einen Bug im IE11 demonstrieren:

http://jsfiddle.net/t8kkqwh9/2/

Erwartetes Ergebnis: ein grünlicher Rahmen lt. via border-image rerefenzierter Grafik um den Text "WTF?!"

Tatsächliches Ergebnis im IE11(Win7 / Win 8.1): Kein Rahmen. Noch kruder: Sobald man vom Standardzoom abweicht (z.B. 75%, 125% statt der voreingestellen 100%), erscheint der Rahmen! Auch bei 100% erscheint er, wenn man mit den CSS-Eigenschaften rumspielt(z.B. Rotation ändern / rausnehmen). Frage: Gibt es einen lustigen Trick, um den Bug zu umgehen?

  1. Hi,

    Erwartetes Ergebnis: ein grünlicher Rahmen lt. via border-image rerefenzierter Grafik um den Text "WTF?!"

    Tatsächliches Ergebnis im IE11(Win7 / Win 8.1): Kein Rahmen.

    Also ich sehe bei deinem Fiddle sofort den Rahmen, im IE 11/Win 7.

    Noch kruder: Sobald man vom Standardzoom abweicht (z.B. 75%, 125% statt der voreingestellen 100%), erscheint der Rahmen! Auch bei 100% erscheint er, wenn man mit den CSS-Eigenschaften rumspielt(z.B. Rotation ändern / rausnehmen).

    Dein Fiddle zeigt bei mir den Rahmen, ohne dass ich den Standardzoom von 100% oder irgendwas am CSS ändere.

    Frage: Gibt es einen lustigen Trick, um den Bug zu umgehen?

    Dazu müsste man ihn erst mal zu Gesicht bekommen.

    MfG ChrisB

    --
    Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
    1. Dein Fiddle zeigt bei mir den Rahmen, ohne dass ich den Standardzoom von 100% oder irgendwas am CSS ändere.

      Folgendes wollte ich gerade schreiben:

      Huh?! Mach mich nicht fertig! Trotzdem Danke für die Info.

      Dann kam mir ne Idee: Bei mir zeigt er den Rahmen auch an, aber nur wenn ich die Fensterbreite verändere. Bei Dir auch? Einfach mal langsam schmaler / breiter ziehen...

      1. Hi,

        Dann kam mir ne Idee: Bei mir zeigt er den Rahmen auch an, aber nur wenn ich die Fensterbreite verändere. Bei Dir auch? Einfach mal langsam schmaler / breiter ziehen...

        Ich kann den Fehler nachvollziehen, wenn ich das Fiddle-Ergebnis im Vollbild anschaue (/show hinten an die Adresse angehängt) – allerdings ändert es nichts, wenn ich die Fenstergröße verändere.

        Und ja, gewisse Zoom-Stufen scheinen den Bug auch zu killen – bei manchen ist er dann aber wieder da, z.B. bei 175%.

        MfG ChrisB

        --
        Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
        1. Ich kann den Fehler nachvollziehen, wenn ich das Fiddle-Ergebnis im Vollbild anschaue (/show hinten an die Adresse angehängt) – allerdings ändert es nichts, wenn ich die Fenstergröße verändere.

          Und ja, gewisse Zoom-Stufen scheinen den Bug auch zu killen – bei manchen ist er dann aber wieder da, z.B. bei 175%.

          Vielen Dank für Deine Mühe. Bleibt die Frage nach einem funktionalem Bugkiller. Meine Versuche via box-shower und diversen transforms haben den Bug jeweils nur auf andere Zoom-Stufen verlagert :-(

          Na gut, dann halt kein image-border für aktuelle IEs, wie war das noch von wg. progressive enhancement? Es geht nicht um ein optisches Goodie, sondern um eine GUI. Wenn die Border einfach fehlt, ist es FAIL, nicht verschmerzbar.

          1. Hallo,

            das ganze ist kein Bug sondern nur ein Rundungsproblem bei der Berechnung der Darstellung.

            Es geht nicht um ein optisches Goodie, sondern um eine GUI. Wenn die Border einfach fehlt, ist es FAIL, nicht verschmerzbar.

            Kann es sein, das du aus einer Mücke einen Elefanten machen willst?

            Zu einen ist es für mich schlicht nicht nachvollziehbar, dem Besucher so eine große Grafik für einen 1px breiten Rahmen aufzuzwingen:

            http://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Color_icon_green.svg/1024px-Color_icon_green.svg.png

            Zum anderen läßt sich dein persönlicher Bug ganz einfach vermeiden, indem du

            a) entweder einfach auf die Grafik verzichtest und nur die darüber stehende border-Eigenschaft benutzt oder

            b) dem Rahmen einfach eine Breite von 2px mit auf den Weg gibst.

            Wenn die Border einfach fehlt, ist es FAIL, nicht verschmerzbar.

            Wenn die Border fehlt oder wenn die Grafik als Border fehlt? Den zweiten Fall kann ich nicht nachvollziehen. Wozu soll eine 1px breite Grafik als Border unabdingbar sein?

            Gruss

            MrMurphy

            1. das ganze ist kein Bug sondern nur ein Rundungsproblem bei der Berechnung der Darstellung.

              Wenn man eine border notiert, diese dann aber beim Verschieben des Browserfensters sporadisch erscheint und verschwindet, dann ist das für Dich kein Bug? Interessante Interpretation, arbeitest Du im Vertrieb? ;-)

              Kann es sein, das du aus einer Mücke einen Elefanten machen willst?

              Ja. Der Weltfrieden hat definitiv höhere Priorität.

              Zu einen ist es für mich schlicht nicht nachvollziehbar, dem Besucher so eine große Grafik für einen 1px breiten Rahmen aufzuzwingen:
              http://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Color_icon_green.svg/1024px-Color_icon_green.svg.png

              Im Produktivbetrieb kommt eine andere, animierte Grafik zum Einsatz. Fiddles auf lokale Dateien zu referenzieren ist eher schlecht.

              Zum anderen läßt sich dein persönlicher Bug ganz einfach vermeiden, indem du
              a) entweder einfach auf die Grafik verzichtest und nur die darüber stehende border-Eigenschaft benutzt oder

              Danke für den Tipp, genau das wird wohl auch passieren. Das blöde daran ist: ich muss tatsächlich für den IE 11 Browser-Sniffing betreiben, weil es sämtliche von mir bislang sonst getesteten Umgebungen korrekt umsetzen, bzw. einfach die Grafik nicht anzeigen und die normale Border anzeigen. Uncool.

              b) dem Rahmen einfach eine Breite von 2px mit auf den Weg gibst.

              Die Animation ist prägnant. Bei 1px passt das gut, bei 2px sieht es lächerlich aus.

              Wenn die Border fehlt oder wenn die Grafik als Border fehlt? Den zweiten Fall kann ich nicht nachvollziehen. Wozu soll eine 1px breite Grafik als Border unabdingbar sein?

              Zur Visualisierung innerhalb einer GUI. So ähnlich wie ein Cursor, schon eher wichtig.

              1. Om nah hoo pez nyeetz, Mitleser!

                Danke für den Tipp, genau das wird wohl auch passieren. Das blöde daran ist: ich muss tatsächlich für den IE 11 Browser-Sniffing betreiben, weil es sämtliche von mir bislang sonst getesteten Umgebungen korrekt umsetzen, bzw. einfach die Grafik nicht anzeigen und die normale Border anzeigen. Uncool.

                Und wenn du die Grafik als vollflächiges Pdeudoelement realisierst und absolut positionierst?

                Matthias

                --
                Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Schwan und Schwanzflosse.

                1. Om nah hoo pez nyeetz, Matthias Apsel!

                  Und wenn du die Grafik als vollflächiges Pdeudoelement realisierst und absolut positionierst?

                  oder gleich ein Hintergrundbild verwendest?

                  Mehrere Hintergründe lassen sich stapeln, background-clip existiert ebenfalls.

                  Matthias

                  --
                  Der Unterschied zwischen Java und JavaScript ist größer als der zwischen TeX und Textmarker.

                  1. Danke für die Anregungen, aber der Umbau ist es mir für die Umgehung eines Bugs in einem Browser nicht Wert. Ich hatte gehofft, irgendeine magische CSS-Anweisung (wie z.B. -webkit-backface-visibility, um im Safari Probleme mit Lücken in Rahmen zu fixen) zu finden, die das Rendering derart ändert, dass der Bug nicht auftritt.