Svg mask on safari fails when base href is defined

[lucboutier]

Hi,

Mask rely on svg url based reference which seems to cause issues with the tag.

I found some information that describe the problem here angular/angular.js#8934 and here airbnb/lottie-web#360

I tried to find a workaround using APP_BASE_HREF and some generation features of angular cli but didn't managed to get anything working for both my prod and dev env. I guess that the solution may lie more on the angular CLI side so I created also an issue there angular/angular-cli#11952 on angular cli)

Have you encountered such issue ? Is there any known workaround ?

[pavax]

We faced the same problem in our project. We ended up in creating a angular directive that decorates the <fa-icon> component for angular-fontawesome.

The svg element are updated in the ngAfterViewInit phase and listen for router NavigationEnd events. In that case also dynamically added component will be decorated as well as on every route/location change.

see here: https://gist.github.com/pavax/117ef58db65f8fe1a43a2c5b536abcd7

Example:
<rect clip-path="url(#clip-pdOauG2uNwrh)" mask="url(#mask-UvndIcM3bKgo)"></rect>
...will be changed to
<rect clip-path="url(/my-base-href/my-current-location#clip-pdOauG2uNwrh)" mask="url(/my-base-href/my-current-location#mask-UvndIcM3bKgo)"></rect>

since that pattern is causing problems on IE11 and Edge the fix is only applied to safari

[Sandeep2408]

Hello
You need to pass full url and append id of mask tag in the image which want to mask. It works fine with base url also. For example

[devoto13]

See https://github.com/FortAwesome/Font-Awesome-Pro/issues/1422#issuecomment-520084263. It is a Safari bug. I've asked fontawesome-svg-core to implement a workaround to resolve this issue.

[devoto13]

This was finally fixed in Safari 13.1.

[devoto13]

I'm going to close it as it is working correctly in both Safari 13.1 and Safari 14. And it doesn't seem to be worths the effort fixing it in the older versions.

You may consider using a workaround described in #86 (comment) if you need to support older versions.