Unscharfe Bilder im Firefox

TomBOX · #1 (**permalink**) 03.03.2015, 14:53

Hallo allerseits,

vorab muss ich anmerken, dass ich unsicher bin, ob dies das passende Unterforum ist. So richtig scheint keins zu passen... für mein spezifisches Anliegen.

Derzeit bereite ich eine responsive Website vor, in der sich die Bilder flexibel verkleinern, wenn die Anzeigefläche entsprechend kleiner wird. Das Ganze habe ich mit Bootstrap umgesetzt.

Prinzipiell funktioniert das auch ganz gut.

Aber: Im Firefox - und nur dort - werden die Bilder beim (Verkleinern/Skalieren) total unscharf. Das passiert beim IE und bei Chrome nicht.

Gibt es eine Möglichkeit dieses Phänomen - im FF - zu bekämpfen?

cloned · #2 (**permalink**) 03.03.2015, 15:16

Ohne spezifisches Beispiel kann man dazu nix sagen.

TomBOX · #3 (**permalink**) 03.03.2015, 15:49

Zitat:

Zitat von cloned

Ohne spezifisches Beispiel kann man dazu nix sagen.

Oops, sorry. Link vergessen. Steht jetzt drin.

cloned · #4 (**permalink**) 03.03.2015, 16:02

Kann es sein, dass es etwas mit diesem Problem zu tun hat?

TomBOX · #5 (**permalink**) 03.03.2015, 16:58

Zitat:

Zitat von cloned

Kann es sein, dass es etwas mit diesem Problem zu tun hat?

Also die Richtung könnte schon einmal helfen.

Folgendes funktioniert/hilft:

Code:

CSS:
.image-scale-hack {
    transform: rotate( .0001deg );
}

Praktischerweise habe ich das gleich mal in eine globale Formatierungsanweisung für das img-Element platziert:

Code:

CSS:
img {
    max-width: 100%;
    height: auto;
    transform: rotate( .0001deg );
}

Habe es ausprobiert: im Firefox werden die Fotos jetzt tatsächlich schärfer dargestellt. Irgendwie komisch, dass man sie dafür erst einmal ein Stück drehen muss

Das Problem ist jetzt allerdings, dass dadurch - in allen Browsern - offenbar eine Änderung der Positionierung stattfindet. Gut, Problem nicht wirklich, wenn man es weiß. Ich habe nämlich relativ positionierte DIVs mit Hintergrundbildern, die SPANs enthielten, die absolut positioniert sind. Durch den Rotationstrick waren meine SPANs plötzlich nicht mehr sichtbar. An dieser Stelle könnte man mir unsauberes Arbeiten vorwerfen.

Wie ich nämlich feststellte, fehlte die Angabe einer passenden Schichtposition (z-index). Fügt man das für die absolut positionierten Elemente hinzu, klappt alles.

Also vielen Dank!

pawa · #6 (**permalink**) 04.03.2015, 13:53

Im anderen Browser ging es aber?

cloned · #7 (**permalink**) 04.03.2015, 13:55

Ja, das funktioniert in anderen Browsern. Lies dir den von mir geposteten Link durch, da steht das nochmal genauer inklusive weiterführender Links.

pawa · #8 (**permalink**) 06.03.2015, 13:44

Ohja jetzt habe ich es auch gesehen...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Hintergrund wird nicht angezeigt	maxx	CSS	6	14.10.2012 18:27
Hilfe!!! mein Homepagelayout funktioniert nicht!	maxx	CSS	5	14.10.2012 07:21
Firefox 3: Bilder viel zu weit unten	samigasi	CSS	3	05.02.2009 18:33
Textabstand zu Bilder bei IE und Firefox unterschiedlich, bitte um Hilfe!!!!!!!!!!!!!	usa_björn	CSS	10	03.08.2007 12:04
firefox zeigt einige bilder nicht an	zerone	CSS	1	27.05.2005 15:28