"falsche" Darstellung von SVG + CSS in Firefox für Android

[Daniel]

Hallo,

wenn man in o.g. Seite auf "Angebote anzeigen" klickt und dann ein Angebot auswählt, erscheinen rechts und links Pfeile, um zum vorherigen/nächsten Angebot zu springen: Das funktioniert auf dem Desktop in diversen Browsern (getestet mit aktuellem chrome, Firefox, Edge, IE mag lediglich die var(--) nicht). Bei kleinerem Bildschirm sollen diese nach unten wandern, auch das klappt auf dem Desktop:

Wenn ich die Seite auf meinem Smartphone anschaue, stellt chrome das richtig dar, aber Firefox zeigt stattdessen zwei riesige schwarze Kreise an:

Ich stehe gerade auf dem Schlauch, was Firefox hier nicht mag und vor allem wie ich das reparieren kann. Hat jemand einen Tipp für mich?

Viele Grüße Daniel

[[e-mail]]

Hallo,

Wenn ich die Seite auf meinem Smartphone anschaue, stellt chrome das richtig dar, aber Firefox zeigt stattdessen zwei riesige schwarze Kreise an:

Ich stehe gerade auf dem Schlauch, was Firefox hier nicht mag und vor allem wie ich das reparieren kann. Hat jemand einen Tipp für mich?

Ich weiß es auch nicht, du könntest aber mal

<circle fill="var(--themafarbe)" />

probieren.

Das hab ich nur auf die Schnelle gefunden, hab aber keine Zeit, das genau zu lesen.

https://stackoverflow.com/questions/27866893/svg-fill-not-being-applied-in-firefox/27872310

Viele Grüße Daniel

[Der Martin]

Hi,

Ich stehe gerade auf dem Schlauch, was Firefox hier nicht mag und vor allem wie ich das reparieren kann. Hat jemand einen Tipp für mich?

Ich weiß es auch nicht, du könntest aber mal

<circle fill="var(--themafarbe)" />

probieren.

und das soll gegen die übertriebene Vergrößerung helfen? Bestenfalls gegen die Schwarzfärbung.

Noch ein gutgemeinter Tipp: Ich glaube nicht, dass die Stiftung Warentest es witzig findet, wenn du dich mit deren Domain identifizierst.

Live long and pros healthy,
 Martin

[Matthias Scharwies]

Servus!

Ich weiß es auch nicht, du könntest aber mal

<circle fill="var(--themafarbe)" />

probieren.

und das soll gegen die übertriebene Vergrößerung helfen?

Wie [e-mail] in seinem Link auf SO vermutete, greifen dort die Selektoren nicht.

Du kannst evtl. div.prevnext streichen und durch <svg id="prevnext" .....> ersetzen. Evtl. spricht das CSS auf diesen eindeutigen Selektor an.

Normalerweise gebe ich den svg auch keine Größe, versuch aber mal width="50" height="50". Das kann durch CSS immer noch verändert werden. Der Kreis wird dann auf jeden Fall nicht mehr sooo groß.

Bestenfalls gegen die Schwarzfärbung.

Zu den Farben, ich würde es mit dem XML-Attribut mal probieren.

Übrigens, path.pfadhat einen box-shadow, das gibt's nur in der HTML-Welt, SVG kannst Du mit filter: dropshadow(...); einen Schlagschatten geben.

Probier auch dort mal fill="white" aus.

Herzliche Grüße

Matthias Scharwies

[Daniel]

Hallo,

und erstmal Danke, dass Ihr Euch die Seite angeschaut habt, obwohl ich gestern im Eifer vergessen hatte, die relevanten Code-Teile hier ins Forum reinzukopieren! Aber oft ist es vielleicht sogar einfacher, die ganze Seite zu sehen und den relevanten Code im Inspektor anzuschauen...

Du kannst evtl. div.prevnext streichen und durch <svg id="prevnext" .....> ersetzen. Evtl. spricht das CSS auf diesen eindeutigen Selektor an.

Ja, wenn ich statt dem DIV dem SVG die Klasse (nicht ID, weil es beide betrifft) zuweise, funktioniert es!

Normalerweise gebe ich den svg auch keine Größe, versuch aber mal width="50" height="50". Das kann durch CSS immer noch verändert werden. Der Kreis wird dann auf jeden Fall nicht mehr sooo groß.

Ist jetzt gar nicht mehr nötig.

Zu den Farben, ich würde es mit dem XML-Attribut mal probieren.

Übrigens, path.pfadhat einen box-shadow, das gibt's nur in der HTML-Welt, SVG kannst Du mit filter: dropshadow(...); einen Schlagschatten geben.

Danke für den Hinweis, der Schatten ist sowieso überflüssig.

Probier auch dort mal fill="white" aus.

Damit geht's auf jeden Fall, aber nachdem ich dem SVG die Klasse zugewiesen habe, funktionert jetzt auch die Farbzuweisung für den Pfad mittels CSS, warum auch immer...

Danke für die wie immer super schnellen und kompetenten Antworten!

Gruß

Daniel

[klawischnigg]

Hi there,

Ich stehe gerade auf dem Schlauch, was Firefox hier nicht mag und vor allem wie ich das reparieren kann. Hat jemand einen Tipp für mich?

Ja, google nach: "problem firefox android svg viewbox"