Visx: iOS - Linear Gradients showing as Black

[rollasoc]

Gradients for me on iOS (using iOS 9.3.5) are showing as black,

I have tried Linear Gradient as well as the built in gradients, tried on Chrome and Safari on iOS.

                        <LinearGradient
                            from='#0f73c1'
                            to='#0f609f'
                            id="levelgradient"
                            fromOpacity={0.3}
                            toOpacity={1}
                        />

                        <AreaClosed
                            data={this.data}
                            xScale={this.xScale}
                            yScale={this.yScale}
                            strokeWidth={2}
                            stroke='#0f609f'
                            strokeOpacity={1}
                            x={x}
                            y={y}
                            fill="url('#levelgradient')"
                        />

Tried with and without the to/from Opacity.
Plus your gallery page doesn't load in iOS crashes with "An unexpected error has occurred"

Any suggestions?

[hshoff]

Could you try using the svg <linearGradient /> element instead of the @vx/gradient component and see if that works in iOS 9? Trying to figure out if it's a vx problem or the browser in the older version of iOS don't support svg gradients. Unfortunately I don't have an iOS 9 device to test on.

[rollasoc]

I tried throwing a generic linear gradient over the graph.

<g>
<linearGradient id="linear-gradient" gradientUnits="userSpaceOnUse" x1="1041.6901" y1="169.485" x2="1383.9301" y2="169.485" gradientTransform="matrix(1 0 0 -1 -761.14 398.97)">
                                <stop offset="14%" stopColor="#2f343b" stopOpacity="0%" />
                                <stop offset="43%" stopColor="#337082" stopOpacity="41%" />
                                <stop offset="67%" stopColor="#369fb9" stopOpacity="73%" />
                                <stop offset="79%" stopColor="#37b1cf" stopOpacity="85%" />        </linearGradient>
                            <path id="gradient" style={{ fill: 'url(#linear-gradient)' }} className="cls-200" d="M622.8,119.6C512.1,72,385.5,78.9,280.6,138.1l134.3,232.6c31.2-16.8,68.2-18.5,100.9-4.8    L622.8,119.6z" />
</g>

and this too is black on iOS. Tried on iPad and iPhone

[rollasoc]

I don't think this is a vx issue specifically.

The general consenus on the net, is to wrap the SVG linear gradient in a tag. Which is already being done by VX, (and wasn't done above, it also didn't work when I tried it).

Running the w3schools try it page (https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_linear) works on ios.
but when I copy and paste the code into my React site (and not on a page with VX on), and react up the attributes, I still just get a black ellipse. So I think React is doing something weird.

So for the moment, I am binning the use of linear gradients, until I can find some time to investigate further.

[hshoff]

Sounds good. Going to close this for now. If there’s something vx can do to better support gradients on ios 9 i’d be happy to reopen and make the fix.

[JacquiManzi]

You may have figured this one out already, but my guess is that you have a <base /> tag in your react index.html.

This issue explains the problem: https://github.com/airbnb/lottie-web/issues/360 , but <base /> will cause problems with relative fill(url) in svgs and cause all of your gradient svgs to display black.

[nagman]

@JacquiManzi My god, you're a genius!