Safari mit Rahmen aus transparentem PNG

Eine Website, an der ich arbeite, hat ein teilweise transparentes PNG-Bild, das Teile der Website überlagert. Das Bild wird auf 100 % der Breite des Browserfensters angepasst. In allen anderen Browsern verhalten sich die transparenten Teile normal – aber Safari zeigt einen dünnen Umriss, wo das Bild transparent sein sollte.

Ich hoffe der Screenshot verdeutlicht das Problem:

Geben Sie hier die Bildbeschreibung ein

Jetzt frage ich mich, ob das ein Bug ist – oder ein Feature? Und natürlich möchte ich diese Zickzacklinie loswerden – daher sind alle Vorschläge und Hinweise willkommen. Danke schön!

BEARBEITEN:

  1. Ja, ich habe überprüft, ob das Bild eine graue Linie hat – aber das ist nicht der Fall.
  2. Auch dieses Problem trat nur auf, nachdem ich Safari auf 11.0.2 aktualisiert hatte.
  3. Und wenn Sie die Breite des Bildes in den Entwicklungswerkzeugen zuerst auf die tatsächliche Breite (7000 Pixel) und dann zurück auf 100 % ändern, verschwindet die graue Linie.
  4. Hier ist ein Link zu der Website , auf der das Problem auftritt.
Kannst du das Bild selbst teilen? Ich vermute, der graue Umriss ist Teil des Bildes, stackoverflow.com/questions/19549498/…
Bitte geben Sie die URL zum eigentlichen Bild an, nicht zu einem Screenshot.
Danke für deinen Vorschlag. Das Bild hat jedoch keine graue Linie. Auch dieses Problem tritt nur auf, nachdem ich Safari auf 11.0.2 aktualisiert habe. Und wenn Sie die Breite in den Entwicklungswerkzeugen zuerst auf die tatsächliche Breite (7000 Pixel) und dann zurück auf 100 % ändern, verschwindet die graue Linie. (Frage entsprechend aktualisiert)
Ich bin auf Safari 11.0.1 und sehe keine Linie. Definitiv aber ein Bug.

Antworten (1)

Ich stand gerade vor dem gleichen Problem und bin über diese Frage gestolpert.

Für mich zeigte das Bild eine dünne, mitteldunkle, schattige Grenze am Rand zwischen dem nicht transparenten und dem transparenten Teil des Bildes. Das Problem war nur in Safari sichtbar.

Vergleich des gerenderten Bildes mit dem dünnen Rand in Safari und dem Originalbild mit sichtbarer Transparenz

Für mich bestand die Lösung darin, transform: translateZ(0px)das Bild einfach hinzuzufügen. Dadurch wird das Rendering des Bildes so geändert, dass der Rand verhindert wird.

Möglicherweise möchten Sie diesen Fix jedoch auf Safari beschränken, da er dazu führt, dass das Bild in Chrome pixelig gerendert wird.

Safari mit Rahmen aus transparentem PNG
AntwortenHierDatenschutz-Bestimmungen1y, 0v