Skip to content

fix(icon): make svg filters work in Safari/Firefox #11959

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from

Conversation

MikaAK
Copy link

@MikaAK MikaAK commented Jun 27, 2018

SVG filters do not work in Safari/FF because of paths in url needing to be updated to current path
This fixes #9276
WIP

SVG filters do not work in Safari/FF because of paths in url needing to be updated to current path
This fixes angular#9276
@MikaAK MikaAK requested a review from jelbourn as a code owner June 27, 2018 21:01
@googlebot
Copy link

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed (or fixed any issues), please reply here (e.g. I signed it!) and we'll verify it.


What to do if you already signed the CLA

Individual signers
Corporate signers

@googlebot googlebot added the cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla label Jun 27, 2018
@googlebot
Copy link

CLAs look good, thanks!

@googlebot googlebot added cla: yes PR author has agreed to Google's Contributor License Agreement and removed cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla labels Jun 27, 2018
Copy link
Member

@crisbeto crisbeto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This needs unit tests as well. Also using a regex for this seems a little brittle. cc @jelbourn

private _updateUrlPaths(svg: SVGElement) {
const currentPath = this._location.prepareExternalUrl(this._location.path());

svg.outerHTML = svg.outerHTML.replace(/url\((.*)\)/, `url(${currentPath}$1)`);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems very inefficient since it's asking the browser to parse the HTML once and then re-parse it once the URLs are updated. Since you're using a regex anyway, why not do it before the element is even created?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Regex does seem a bit brittle I agree. I'll admit I didn't read through the code at all, so I probably could of found a better spot. When I get a few minutes somehow I'll read the code and find a better spot for this!

@ngbot
Copy link

ngbot bot commented Aug 31, 2018

Hi @MikaAK! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

@MikaAK
Copy link
Author

MikaAK commented Oct 5, 2018

Fixed by #12428

@MikaAK MikaAK closed this Oct 5, 2018
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
cla: yes PR author has agreed to Google's Contributor License Agreement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Enhancement: mat-icon set current page absolute path on filter urls for compatibility with safari
3 participants