Skip to content

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

Closed
MikaAK wants to merge 3 commits into
angular:masterfrom
MikaAK:patch-1
Closed

fix(icon): make svg filters work in Safari/Firefox#11959
MikaAK wants to merge 3 commits into
angular:masterfrom
MikaAK:patch-1

Conversation

@MikaAK

@MikaAKMikaAK commented Jun 27, 2018

Copy link
Copy Markdown

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 fixesangular#9276
@MikaAK
MikaAK requested a review from jelbourn as a code ownerJune 27, 2018 21:01
@googlebot

Copy link
Copy Markdown

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

@googlebotgooglebot 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
Copy Markdown

CLAs look good, thanks!

@googlebotgooglebot 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

@crisbetocrisbeto left a comment

Copy link
Copy Markdown
Member

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

Comment threadsrc/lib/icon/icon.ts
private _updateUrlPaths(svg: SVGElement) {
const currentPath = this._location.prepareExternalUrl(this._location.path());

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

Copy link
Copy Markdown
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
Copy Markdown
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

ngbotBot commented Aug 31, 2018

Copy link
Copy Markdown

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
Copy Markdown
Author

Fixed by #12428

@MikaAKMikaAK closed this Oct 5, 2018
@angular-automatic-lock-bot

Copy link
Copy Markdown

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-botangular-automatic-lock-botBot locked and limited conversation to collaborators Sep 9, 2019
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

cla: yesPR 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

@MikaAK@googlebot@crisbeto