OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Polyline renders in different thickness in Firefox and Chrome despite having the same stroke-width

  • Thread starter Thread starter Berry
  • Start date Start date
B

Berry

Guest
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:

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

<p>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.</p>
<p>The polyline itself is declared simply with the points being generated by code:</p>
<pre><code><polyline
transform="translate(0 0)"
points="" // Computer-generated points
stroke="#142e52"
stroke-width="1"
fill="none"
vector-effect="non-scaling-stroke"
></polyline>
</code></pre>
<p><a href="https://jsfiddle.net/y5ckLj2w/" rel="nofollow noreferrer"><strong>Playground link</strong></a></p>
<p>Firefox 127.0.1:
<a href="https://i.sstatic.net/TeUWdIJj.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/TeUWdIJj.png" alt="enter image description here" /></a></p>
<p>Chrome 126.0.6478.63:
<a href="https://i.sstatic.net/kEfOgXlb.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/kEfOgXlb.png" alt="enter image description here" /></a></p>
 

Latest posts

Top