[CSS] Verschwommene HDPI (2x) Grafiken in Absolut/Fixierten Elementen

Dieses Thema im Forum "Webdesign" wurde erstellt von Murdoc, 28. Juni 2013 .

  1. 28. Juni 2013
    Zuletzt von einem Moderator bearbeitet: 15. April 2017
    Verschwommene HDPI (2x) Grafiken in Absolut/Fixierten Elementen

    Ich habe eine mobile UI erstellt und muss nun feststellen, dass 2x Grafiken als Hintergrund o.ä. im Android Stock Browser (teilweise) verschwommen dargestellt werden. Ich habe auch doppelt überprüft ob die 2x Grafiken auch geladen werden.

    Dieses Verhalten trifft im Grunde nur auf Elemente zu, die absolute/fixed/relative Positioniert wurden und/oder einen z-index Wert besitzen.

    Kennt jemand zufällig dieses Problem und weiß einen Workaround?
    Es handelt sich dabei nämlich sehr wahrscheinlich um einen Bug, denn Fennec und Chrome Mobile haben keinerlei Probleme.

    Fennec (Firefox für Android BETA)
    Bild

    Android Stock Browser (und damit leider auch die zu Grunde liegende Engine des WebView):
    Bild

    // ---------------------

    Copy & Paste aus Beitrag #3

    Ich hab hier mal zum testen ein Beispiel erstellt:

    http://murdoc.eu/hdpi-bug

    Bild

    Zip zum Download:
    https://www.xup.in/dl,11961696/hdpi-bug.zip/

    Firefox läd das 2x Bild und zeigt es gestochen scharf an.
    Android Stock Browser läd auch das 2x Bild, zeigt es aber verschwommen an.
     
  2. 28. Juni 2013
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Verschwommene HDPI (2x) Grafiken in Absolut/Fixierten Elementen

    Bei meinem Versuchsaufbau konnte ich das Problem mit Android 4.0.4 nicht nachvollziehen. (siehe unten)

    Wenn die Grafiken über 3G geladen werden könnte das Problem hier liegen:
    http://stackoverflow.com/a/16711071


    http://mruy.de/lab/android-stock-imgblur/

    Bild
     
  3. 28. Juni 2013
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Verschwommene HDPI (2x) Grafiken in Absolut/Fixierten Elementen

    Ich hab hier mal zum testen ein Beispiel erstellt:

    http://murdoc.eu/hdpi-bug

    Bild

    Zip zum Download:
    https://www.xup.in/dl,11961696/hdpi-bug.zip/

    Firefox läd das 2x Bild und zeigt es gestochen scharf an.
    Android Stock Browser läd auch das 2x Bild, zeigt es aber verschwommen an.

    // -------------------------

    "Fehler" gefunden.

    Das Element mit dem Hintergrund darf nicht leer sein.
    Wenn ich Text reinschreibe wird der Hintergrund scharf dargestellt.

    Aber nur wenn der Text (theoretisch) sichtbar ist ...

    Der Workaround:
    Code:
    display: inline-block;
    font-size: 2pt; /* 1pt reicht nicht aus */
    color: transparent;
    Kann auch sein, dass das nur in Verbindung mit einem A-Element auftritt.
    Keine Ahnung...

    Wie drauf kam? Verzweiflung.
     
  4. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.