0

I have an SVG Polyline that renders in two difrerent thickness in different browsers - Thicker for Chrome and thinner for Firefox. Would anyone know why? And how would I fix it such that the two have the same thickness? I prefer a solution that does not rely on detecting which browser is running.

The polyline itself is declared simply with the points being generated by code:

<polyline
    transform="translate(0 0)"
    points="" // Computer-generated points
    stroke="#142e52"
    stroke-width="1"
    fill="none"
    vector-effect="non-scaling-stroke"
></polyline>

Playground link

Firefox 127.0.1: enter image description here

Chrome 126.0.6478.63: enter image description here

Improve this question
8
  • The Polyline renders exactly the same for me in both Chrome and Firefox (current versions, on Ubuntu)
    – Tushar Jadav
    Commented Jun 25 at 13:02
  • @TusharJadav do you use a High DPI screen? That might play a part because the screenshots above are taken on a High DPI screen
    – Berry
    Commented Jun 25 at 13:18
  • 2
    Nested svg works differently in Firefox than Chrome. I don't think Chrome is following the SVG spec here.
    – Robert Longson
    Commented Jun 25 at 13:43
  • Is there somethign I can do to make them render with the same thickness? @RobertLongson
    – Berry
    Commented Jun 25 at 14:03
  • Unnesting the SVG is not an option because they're used to group and position the elements
    – Berry
    Commented Jun 25 at 15:39
Related questions
1086
How to detect Safari, Chrome, IE, Firefox and Opera browsers?
1420
How do I combine a background-image and CSS3 gradient on the same element?
1
SVG transform only on path coordinates not lines and thickness
Load 7 more related questions Show fewer related questions

0

Reset to default

Browse other questions tagged or ask your own question.