Chrome update, icons missing

[martinoleary]

Details

Chrome not showing the icons on the share popup

Description

see attached.

Affected Tech

Chrome Browser version: 50.0.2661.94 (64-bit)

OS(s)

Ubuntu and Windows 10

• ​

Browser(s)

Chrome

• ​

Steps to Reproduce

replicate on the example site using this chrome version or later: https://sharebutton.co/

jsfiddle Example

1. ​
2. ​
3. ​

TL; DR

...

Comments

Anything else related to the issue that doesn't fit above.

[techpines]

+1

Is there a workaround?

[rcamposp]

Same here. Still looking for a answer...

[kylemac]

all, we may not be able to look into solving this for weeks. unfortunately, this project is low on our priority list and we'll have to rely on the community if there's going to be an immediate solution.

[techpines]

I think if you host the SVG icons somewhere else, and then just reference them in the stylesheets, I bet this would work.

Right now they are embedding the SVG's as base64 data in the css, and there must be some kind of encoding mistake. I'll post a workaround, in the next few days unless someone else does.

[rcamposp]

I've downloaded the SVG files and change the background images to point directly to the files instead of the URI data and it worked. Apparently the encoding generated after stylus compilation is not longer compatible with Chrome.

[hhsnopek]

It appears we're missing utf8 in our data uri
see this thread - https://mobile.twitter.com/hhsnopek/status/728251445103845376

[xxxdepy]

As well the encoding of the SVG markup in the background-image URL doesn't look good.

The normal SVG markup code be used, like this:

background-image: url("data:image/svg+xml;utf8, <svg>...</svg>");

[gauravmak]

@rcamposp How did you exactly save SVGs as image files? I tried a couple of solutions but failed.

[rcamposp]

At the end i tried something different because i couldn't change de color
(i don't have much experience working with svg). Because I was using
fontawesome on the project for other stuff, I decided to use those icons
instead and worked like a charm.
On May 5, 2016 10:36 PM, "Gaurav Makhecha" notifications@github.com wrote:

@rcamposp https://github.com/rcamposp How did you exactly save SVGs as
image files? I tried a couple of solutions but failed.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#305 (comment)

[rcamposp]

I tried something like what @hhsnopek and @xxxdepy suggested but didn't worked for me. Anyone else has tried changing the url?

[xxxdepy]

@hhsnopek @rcamposp It appears that omitting utf8 isn't the actual problem.

In Chrome, not explicitly setting the width and height of the SVG element causes it to not work.

Here's an example with the same code being used on the page with the problem:
http://jsbin.com/wuyemu/edit?html,css,output

Setting the width and height may work.

Interestingly Mozilla Firefox doesn't seem to support non-encoded SVG, but using the URI encoded SVG is the option to go for.

[gauravmak]

Thank you @xxxdepy Specifying width and height works well.

[yeusiukou]

Can anybody post the fixed css file?