Firefox 17 und CSS-Rahmen basierende Dreiecke werden nicht richtig dargestellt

8

Wie viele Frontend-Devs habe ich den Randtrick verwendet, um Dreiecke in CSS zu rendern. Ссылка dieser Generator hilft bei der Technik.

Heute hat das Firefox-Team eine neue Version ohne ein klares Änderungsprotokoll in der Rendering-Engine veröffentlicht.

Jetzt können wir einen unscheinbaren grauen Rand um diese Dreiecke sehen. Ich habe noch keinen Trick gefunden, um es loszuwerden. edit: Es ist einfacher zu sehen, ob du den "schachähnlichen transparenten" Hintergrund zu etwas wie "grün" zwingst.

Wenn sich darüber hinaus vor Firefox 17 jemand darüber beschwere, wie diese Dreiecke aliased aussehen, ist ein weiterer Trick, die border-style-Eigenschaft auf "gestrichelt" statt auf "fest" zu setzen.

Mit dem Firefow auf dem Dreiecksgenerator können Sie schnell sehen, wie es jetzt aussieht.

Kennt jemand eine Lösung dafür?

edit: mit border-style: Einschub wie vorgeschlagen macht eine hellere Farbe auf meinem FF17

    
Adeher 29.11.2012, 17:02
quelle

2 Antworten

8
___ tag123css ___ CSS (Cascading Style Sheets) ist eine Darstellungsstilsprache, die das Aussehen und die Formatierung von HTML (Hyper Text Markup Language), XML-Dokumenten (Extensible Markup Language) und SVG-Elementen einschließlich (aber nicht beschränkt auf) Farben beschreibt. Layout, Schriftarten und Animationen. ___ tag123firefox ___ Mozilla Firefox ist ein kostenloser, plattformübergreifender Open-Source-Webbrowser. Verwenden Sie dieses Tag, wenn Ihre Frage mit der Funktionsweise von Firefox im Zusammenhang steht oder sich auf Code bezieht, der nicht mit Firefox funktioniert und in anderen Browsern funktioniert. Fragen zur Firefox-Add-On-Entwicklung sollten mit [firefox-addon] getaggt werden. Wenn Sie in Ihrer Frage Firefox zum Surfen verwenden (z. B. als Endbenutzer), sollten Sie stattdessen Ihre Frage zu Super User stellen. ___ tag123geometry ___ Geometrie ist ein Zweig der Mathematik, der sich mit Fragen der Form, Größe, relativen Position von Figuren und den Eigenschaften von Raum beschäftigt. ___ qstnhdr ___ Firefox 17 und CSS-Rahmen basierende Dreiecke werden nicht richtig dargestellt ___ answer18794510 ___

Diese Kombination von Ademers Fix und der anderen gepunkteten Randfixierung scheint das Problem in FF23 perfekt zu lösen.

In langer Form:

%Vor%

Das Kombinieren von Adefers rgba () - Fix mit der gepunkteten Randfixierung (aber nur auf den transparenten Rändern) scheint ein perfektes Dreieck ohne hässliche unscharfe Ränder darzustellen.

    
___ antwort13641350 ___

Ok, hier ist die beste Lösung, die ich bisher habe:

Erhalte den rgb-Wert deines Dreiecks und verwende diese als 0-Opazität rgba anstelle von "transparent" für die gegenüberliegenden Ränder deines Dreiecks.

Wenn Sie die alte Syntax "transparent" beibehalten, funktioniert das als Fallback für IE8

Das endet mit so etwas:

%Vor%

wie in den Antworten gesagt: Wenn Sie den Rand-Stil auf "Inset" setzen, wie vorgeschlagen, ändert sich die Farbe auf FF17.

Ich hoffe, dass jemand eine einfachere Lösung findet oder dass dieser Beitrag anderen Menschen hilft.

    
___ tag123border ___ Ein Rahmen ist ein grafisches Benutzeroberflächenkonstrukt, das verwendet wird, um etwas zu umgeben und / oder hervorzuheben, das darin enthalten ist. ___ qstntxt ___

Wie viele Frontend-Devs habe ich den Randtrick verwendet, um Dreiecke in CSS zu rendern. Ссылка dieser Generator hilft bei der Technik.

Heute hat das Firefox-Team eine neue Version ohne ein klares Änderungsprotokoll in der Rendering-Engine veröffentlicht.

Jetzt können wir einen unscheinbaren grauen Rand um diese Dreiecke sehen. Ich habe noch keinen Trick gefunden, um es loszuwerden. edit: Es ist einfacher zu sehen, ob du den "schachähnlichen transparenten" Hintergrund zu etwas wie "grün" zwingst.

Wenn sich darüber hinaus vor Firefox 17 jemand darüber beschwere, wie diese Dreiecke aliased aussehen, ist ein weiterer Trick, die border-style-Eigenschaft auf "gestrichelt" statt auf "fest" zu setzen.

Mit dem Firefow auf dem Dreiecksgenerator können Sie schnell sehen, wie es jetzt aussieht.

Kennt jemand eine Lösung dafür?

edit: mit border-style: Einschub wie vorgeschlagen macht eine hellere Farbe auf meinem FF17

    
___
Adeher 30.11.2012, 08:19
quelle
9

Diese Kombination von Ademers Fix und der anderen gepunkteten Randfixierung scheint das Problem in FF23 perfekt zu lösen.

In langer Form:

%Vor%

Das Kombinieren von Adefers rgba () - Fix mit der gepunkteten Randfixierung (aber nur auf den transparenten Rändern) scheint ein perfektes Dreieck ohne hässliche unscharfe Ränder darzustellen.

    
Chris Macksey 13.09.2013 20:14
quelle

Tags und Links