Safari SVG Linear Gradient does not work in Safari

Question

Can someone tell me why the linear gradient on the svg element in the header and footer wont work in Safari on this site ? One possible solution i've found on the internet, was wrapping the gradient with a <defs> tag which did not help in this case.

Answer 1

Looks like Safari doesn't like the <base> tag. It stops the fill from working on that browser, so you get the default fill which is black.

eg

 html, body { width: 100%; height: 100%; } 

 <base href="http://emtre.ch.tajo.host.ch/" /> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="footer-svg" width="100%" height="100%" viewBox="0 0 2000, 1200"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:#efefef;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#FFF;stop-opacity:1"></stop> </linearGradient> </defs> <polygon points="0,595 1903,0 1903,1010 0,1010" fill="url(#grad1)"></polygon> </svg> 

against

 html, body { width: 100%; height: 100%; } 

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="footer-svg" width="100%" height="100%" viewBox="0 0 2000, 1200"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:#efefef;stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#FFF;stop-opacity:1"></stop> </linearGradient> </defs> <polygon points="0,595 1903,0 1903,1010 0,1010" fill="url(#grad1)"></polygon> </svg>