Firefox fill/stroke issue

[NeXTs]

Hey

Firefox seems to be having a lot of problems when setting gradient to fill or stroke by styles.
Firefox resolves paths to svg gradients defs differently than Chrome, it uses relative paths. It may randomly add none to the end of any of those rules :\

Looks like those problems may be avoided by using html attributes stroke and fill instead of styles

It occurs when path is other than /
Did you noticed something like that?

[NeXTs]

daamn I just realised that such behaviour was caused by this bug, even with attribute property

It indeed breaks after changing route and even while they saying it has been resolved, I still experience it in ff :(

[NeXTs]

o very funny, firefox.
for those who faced same problem

(upd) see this repo

or

in your router

import { fixSVGPatternPathsInFF } from 'helpers/support'

...
<Route path='profile/:user' component={Profile} onEnter={fixSVGPatternPathsInFF} />

brutal workaround

const isFirefox = /firefox/i.test(navigator.userAgent)

// https://bugzilla.mozilla.org/show_bug.cgi?id=652991
export const fixSVGPatternPathsInFF = () => {
    if( ! isFirefox) return

    let patterns = document.querySelectorAll('[fill^="url(#"],[stroke^="url(#"]')
    for(let i = 0, ii = patterns.length, pattern; i < ii; i++) {
        pattern = patterns[i]
        pattern.style.fill = pattern.style.fill
        pattern.style.stroke = pattern.style.stroke
    }
}