0

in chromium I can use stroke-dasharray followed by 2 numbers with the unit pixel, the same wont work in Firefox - it only accepts unit-less values. The Problem is that I cant strip off the unit from my variable. Do you have any ideas on how to get the same effect in Firefox as in Chromium?

Thank you in advance

Edit:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<line class="top" x1="0" y1="0" x2="100%" y2="0" />
</svg>

.top {
   stroke-dasharray: 1px 1px;
}
Teiem
  • 1,329
  • 15
  • 32
  • 1
    Please include a testable [stack snippet](https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/). – Andy Hoffman Mar 27 '19 at 21:19
  • @AndyHoffman addit the code, but I dont think it was really necessary – Teiem Mar 27 '19 at 21:26
  • 2
    `stroke-dasharray` isn't a measurement, it is a pattern. You aren't setting how far apart they are, you are setting their dash pattern. Is their a reason you can't remove the unit from the CSS? – Anthony Mar 27 '19 at 21:30
  • I dont know how I could remove it – Teiem Mar 27 '19 at 21:31
  • where is it coming from? _The Problem is that I cant strip off the unit from my variable_ what variable from where, and why can't you change it? Also, since `stroke-dasharray` is a pattern, not a height/width, it's quite possible that your variable isn't the thing you should be using to set `stroke-dasharray`. Why can't you just set `stroke-dasharray: 1 1;` in your CSS? – Anthony Mar 27 '19 at 21:46
  • in my case i use stroke-dasharray: calc((100vh - 13.75em) + 30) calc((100vh - 13.75em) - 60); - I have to use relative units – Teiem Mar 27 '19 at 22:07
  • 1
    px work fine for me on Firefox. You have to specify a stroke of course. – Robert Longson Mar 27 '19 at 22:07
  • `stroke-dasharray: 1px 1px;` works in both Chrome and Firefox. In fact you can do `stroke-dasharray: 1px;` with the same result since the gaps are the same size as the dashes. To see the line do not forget to ad a `stroke` and maybe a `svg{overflow:visible}` since otherwise you lose half of the line outside the svg element – enxaneta Mar 27 '19 at 22:13
  • I guess there is an other problem I am unable to identify, at least it works in chromium - I will just hide the element in Firefox - thank you for your help though – Teiem Mar 27 '19 at 22:26
  • We'd need an actual [mcve] in order to help. The markup in the question right now isn't it. – Robert Longson Mar 27 '19 at 22:28
  • https://codepen.io/Teiem/pen/XGLErM - different line in ff and chrome – Teiem Mar 27 '19 at 22:37

1 Answers1

0

First, the reason my code didnt work was wrong, I used calc() to get my numbers (instead of 1px), which is not possible in firefox and know for the last 3-9 years
https://bugzilla.mozilla.org/show_bug.cgi?id=594933
https://bugzilla.mozilla.org/show_bug.cgi?id=1258270

Teiem
  • 1,329
  • 15
  • 32