Bug 191840 - SVG Transparent gradients are too opaque
Summary: SVG Transparent gradients are too opaque
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Depends on:
Reported: 2018-11-19 10:19 PST by d3x0r
Modified: 2018-11-20 17:15 PST (History)
4 users (show)

See Also:

webpage with SVG images on it. (37.55 KB, text/html)
2018-11-19 10:19 PST, d3x0r
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description d3x0r 2018-11-19 10:19:33 PST
Created attachment 355285 [details]
webpage with SVG images on it.

This is a png of comparisons of safari, chrome, firefox, edge rendering the same page.
The overly-white shapes drawn in safari are a solid-colored circle, with 3 circles overlaying it with alpha-transparent gradients (not overall opacity, but alpha changes along the gradient)

Also there's a rotation transform that isn't working in safari (and edge)


Attached is a static HTML page.

This is the application I've been developing.  
https://d3x0r.org:444/javascript/bugbrain (in-dev app)
Comment 1 d3x0r 2018-11-19 10:45:38 PST
http://jsfiddle.net/d3x0r/6yvkcw9b/29/ also another demonstration...
Comment 2 Simon Fraser (smfr) 2018-11-20 15:33:23 PST
http://jsfiddle.net/d3x0r/6yvkcw9b/29/ renders the same in Chrome, Firefox and Safari TP on my Mac.

Do you have a link to the SVG source for something that renders differently in Safari?
Comment 3 Simon Fraser (smfr) 2018-11-20 15:33:59 PST
https://d3x0r.org:444/javascript/bugbrain/ also looks fine in Safari Tech Preview.
Comment 4 d3x0r 2018-11-20 16:55:34 PST
I just have a mac mini; it rencetly applied a system update, someone on IRC said 'hmm that doesn't look right, did you try safari' I hadn't, until I did... the screen shot was all 4 windows stacked in one shot.

I did include a HTML attachment (top) that is the static SVG images.
I don't have them as SVGs themselves; they were created to be added in parts dynamically... but can just copy from <svg> to </SVG> and save them well no I guess not.

This should be green, but shows as white when loaded on my mac-mini from

https://d3x0r.org:444/images/node.svg  (same file source below)
But; it's also the same (basically) as the JS Fiddle, so if it's fixed for the future that's great...

I did try to install a nightly build  all I have is   Version 11.0.2 (13604. ... I got the zip, and opened it, and it appeared to install but I don't know where it went.... (I'm entirely unexperienced with Mac)


<svg xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="-2 -2 68 68">
			<radialGradient id="gradient-0" gradientUnits="userSpaceOnUse" cx="-38.806" cy="-32.359" r="31.21" gradientTransform="matrix(0.556701, 0.060335, -0.061948, 0.571572, 35.942307, 40.952184)"><stop offset="0" style="stop-color: rgba(255, 249, 249, 0.72);"/><stop offset="1" style="stop-color: rgba(255, 255, 255, 0);"/></radialGradient>
			<radialGradient id="gradient-1" gradientUnits="userSpaceOnUse" cx="7.916" cy="20.156" r="31.21" gradientTransform="matrix(1.665372, 0.004509, -0.004806, 1.773443, -10.723868, -25.421527)"><stop offset="0" style="stop-color: rgba(227, 227, 227, 0);"/><stop offset="1" style="stop-color: rgba(0, 0, 0, 0.45);"/></radialGradient>
			<radialGradient id="gradient-2" gradientUnits="userSpaceOnUse" cx="5.259" cy="16.687" r="31.21" gradientTransform="matrix(1.490671, 0.00387, 0.00009, 1.829344, 1.658628, -19.147887)"><stop offset="0" style="stop-color: rgba(246, 243, 243, 0);"/><stop offset="1" style=""/></radialGradient>
			<linearGradient id="gradient-4" gradientUnits="userSpaceOnUse" x1="17.355" y1="-22.732" x2="17.355" y2="44.298" gradientTransform="matrix(0.770686, -0.637215, 0.374193, 0.45257, 22.306562, 74.687881)"><stop offset="0" style="stop-color: rgba(227, 227, 227, 0.29);"/><stop offset="1" style="stop-color: rgba(0, 0, 0, 0.06);"/></linearGradient>
		<ellipse style="fill: rgb(255, 0, 255);" cx="63.354" cy="78.071" rx="30.93" ry="30.717"></ellipse>
		<ellipse style="fill: rgb(0, 0, 255);" cx="63.354" cy="78.071" rx="30.93" ry="30.717"></ellipse>
		<ellipse style="fill: rgb(128, 0, 0);" cx="63.354" cy="78.071" rx="30.93" ry="30.717"></ellipse>
		<circle id="nodeColor" style="fill: rgb(35, 232, 0);" cx="32" cy="32" r="30"/>
		<circle style="fill:url(&quot;#gradient-2&quot;); fill-opacity: 0.28;" cx="39" cy="39" r="30" transform="matrix(1.062366, 0, 0, 1.046363, -8.38973, -7.437199)"/>
		<circle style="fill: url(&quot;#gradient-0&quot;); fill-opacity: 0.78;" cx="32" cy="32" r="30"/>
		<circle style="fill:  url(&quot;#gradient-1&quot;); fill-opacity: 0.68;" cx="32" cy="32" r="30"/>
		<circle style="fill: url(&quot;#gradient-4&quot;);" cx="32" cy="32" r="30" transform="matrix(1.00693, 0, 0, 0.99307, -0.224218, 0.3336)"/>
Comment 5 Simon Fraser (smfr) 2018-11-20 17:14:45 PST
Ah, this is broken in Safari in macOS Mojave, but fixed in Safari Tech Preview.
Comment 6 Simon Fraser (smfr) 2018-11-20 17:15:27 PST
You can get Safari Tech Preview from https://developer.apple.com/safari/download/. It will install in your Applications folder.