search

rexxars / react-hexagon

React component that renders a hexagon using SVG. Supports background images, links, SVG content, click handlers and more.
http://rexxars.github.io/react-hexagon/
MIT License
69 stars 21 forks source link

Firefox fill/stroke issue #4

Closed NeXTs closed 7 years ago

NeXTs commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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
    }
}