1

I have a really odd Safari bug. I have an image inside an SVG shape path, here's the code:

<svg viewBox="0 0 367 367" height="367" width="367" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <pattern id="bias" height="100%" width="100%" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice">
            <image height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="https://upload.wikimedia.org/wikipedia/commons/c/cb/ADAC-Zentrale%2C_Munich%2C_March_2017-01.jpg"/>
        </pattern>
    </defs>
    <path d="M0,183.5 L0,0 L183.5,0 C284.844252,0 367,82.1557484 367,183.5 C367,284.844252 284.844252,367 183.5,367 C82.1557484,367 0,284.844252 0,183.5 Z" fill="url(#bias)"></path>
</svg>

The image renders fine on the home page but the same code on all other pages renders the shape as black and no image, although in the inspector I can see the image is loaded. All other browsers it's fine.

The left shape is an example of it rendering correctly on the home page and the right is how it renders on every other page. Same template, same code. svg shapes

Any ideas? Been pulling my hair out for hours, thanks.

Kaiido
  • 123,334
  • 13
  • 219
  • 285
leanda
  • 199
  • 1
  • 4
  • 16
  • Can't repro on Safari 12.0.1. Which version are you using? Note that Safari for Windows is more than six years old, with no update whatsoever, it makes it a bit like an IE8 (so no wonder you have SVG quirks on it). – Kaiido Nov 03 '18 at 12:17
  • I'm on Version 12.0 (14606.1.36.1.9) on the Mac, having the same problem in iOS safari too. – leanda Nov 03 '18 at 16:50
  • And in the snippet here you've got it black? Otherwise, are you sure that it is this exact markup that is in every pages? (With an image hosted on wikimedia) – Kaiido Nov 03 '18 at 23:01
  • That's the funny thing, no black fill is referenced in the SVG code above or in the stylesheet but it still appears black even with all the styles disabled. I used an image from wiki in this example because I was testing that it wasn't something linked to loading the images dynamically. Exactly the same same piece of markup is loaded on all pages. – leanda Nov 04 '18 at 09:10
  • 1
    Black is the default fillStyle. So if your image doesn't load, it will be black. Now since you didn't shown the actual code, we can only guess as to why the image loads on one page but not others. One such guess could be the use of a relative path in the image's href – Kaiido Nov 05 '18 at 00:37

1 Answers1

1

Turns out it was a <base> tag in the head messing with the relative url.

Similar issue to this issue SVG Gradient turns black when there is a BASE tag in HTML page?

Thanks

leanda
  • 199
  • 1
  • 4
  • 16