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" [email protected] 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?

[colavitam]

These are the new css files as produced by #307.

newcss.zip

[yeusiukou]

Thank you, @colavitam!

[unRARed]

I just ran into this same issue this evening. It appeared the solution was going to be having to download the assets and refer to them explicitly, but strangely I was able to get the assets to display as is with only these two lines of SASS:

share-button .sb-social ul li:before
  background-image: url()

Can't confirm vanilla CSS will do the trick but the above compiles to:

share-button .sb-social ul li:before {
  background-image: url();
}

Confirmed working in Safari Version 9.1.1 (11601.6.17), Firefox 47.0 and Chrome 51.0.2704.103.

[simsketch]

I guess all that remains is for the carrot creative team to update the css on sharebutton.co to reflect the newcss.zip file which has been confirmed working. @hhsnopek

[refi64]

FWIW just rebuilding with the latest svg builder seems to fix the problem...