Skip to content
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

URL encode the "#" character in SVG data url #68

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

coryk135
Copy link

@coryk135 coryk135 commented Dec 8, 2019

The todo-list checkbox SVG is not rendered in Chrome. Replacing the "#" character with the percent encoded value "%23" seems to fix the problem.

Most likely the same problem as this question and answer on Stack Overflow: https://stackoverflow.com/a/30733736

The todo-list checkbox SVG is not rendered in Chrome. Replacing the "#" character with the percent encoded value "%23" seems to fix the problem.

Most likely the same problem as this question and answer on Stack Overflow: https://stackoverflow.com/a/30733736
Copy link

@nelsonic nelsonic left a comment

Choose a reason for hiding this comment

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

Confirmed the checkbox item does not display in Chrome 78 on Mac: https://evancz.github.io/elm-todomvc
image

With @coryk135's fix on localhost we see the checkbox:
image

@ZimbiX
Copy link

ZimbiX commented Jan 18, 2020

This is a duplicate of PR #66, but I think is a more elegant fix due to less URL encoding required.

Fixes issue #65.

Confirmed working in latest stable Firefox and Chrome.

Nice one; LGTM 👍

@ZimbiX
Copy link

ZimbiX commented Jan 18, 2020

Actually, I hadn't seen the note at this link from the other PR. Maybe IE/Edge do require the whole thing to be URL encoded. Could someone test on those please? =)

Copy link

@ZimbiX ZimbiX left a comment

Choose a reason for hiding this comment

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

Testing with Sauce Labs:

The SVG checkmark works in current Edge. It doesn't show in legacy Edge (Trident-based rather than Chromium) or IE 11, but it does fall back to the system one. Odd how legacy Edge has the top one rotated xP Anyway, supporting legacy browsers sucks, so it looks good enough to me!

Screenshot from 2020-01-18 15-29-25
0003screenshot
Screenshot from 2020-01-18 15-29-42

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants