Issue with MS Edge

[amrsalama]

There is a weird behaviour in MS Edge, The image shifted to the top, any ideas ? Thanks!

[hotgeart]

No problem on my side.

[eSilverStrike]

I am getting this issue as well. It works fine in Edge if you load it directly as @hotgeart did but if you include it in a web page with HTML the letters are not centred as the image shows which @amrsalama included. The same page does work fine on Firefox and Chrome.

I confirm that this bit of HTML will produce the error in Edge on my Windows 10 PC (tried several different PCs):

<div style="padding-top:3px;"><img width="115" height="115" title="Test" class="userphoto" alt="" src="https://ui-avatars.com/api/?name=TT&amp;color=FFFFFF&amp;background=784DD1&amp;size=128"><br>Status: offline</div>

Here is a JSFiddle showing the issue (must use Microsoft Edge to see the problem)

https://jsfiddle.net/y9sor1xc/

[cwmrowe]

We are also getting this issue, I think it is to do with the type of image you get back which is dependent upon the accept request header sent by the browser. When called from an <img> tag in Edge then the header is

   Accept: image/png, image/svg+xml, image/*; q=0.8, */*; q=0.5

Which results in the image type in the response being svg.

[cwmrowe]

On further investigation I'm not sure if it is the Accept header that is the problem, I tried it in Postman and got the correctly rendered image, but I am sure it is one of the request headers that's causing this issue.

[eSilverStrike]

I don't like the idea that a developer has not responded yet to this issue. I hope this project is not dead as we just incorporated it into our code.

@LasseRafn are there plans to continue to work on this project? I understand if you don't have time at the moment to work on a fix but it would make us feel better if their was some sort of response.

Thanks

[LasseRafn]

I’m open for ideas and PRs I haven’t really ever worked with EDGE and SVGs so I am unsure what a solution might be We could add an option to force PNG, for when Edge support is a must? Or if someone knows how to fix it, that’s even better 👍🏻

[hotgeart]

I think we should wait. The 15 janv the new Edge based on chromium will be out. So the bug will disappear on its own. No?

source: https://blogs.windows.com/msedgedev/2019/11/04/edge-chromium-release-candidate-get-ready/#ck6RfDbJ1POYcebm.97

[eSilverStrike]

Is anyone running the Beta version of Edge to see if it is actually fixed? It still may not be if Chromium hands off rendering images or something...

If the new Edge fixes the issue it will still be a while before everyone is using it.

It's weird how it works fine in Edge if you access the image directly... cwmrowe seems to be onto something.

[hotgeart]

@eSilverStrike https://i.imgur.com/8RVSyyK.png It looks fine to me

[stof]

IE 11 also have this bug. And unfortunately, in enterprise environments, IE 11 is not near disappearing yet.

[LasseRafn]

I tried installing Edge on Mac, to see how it looks (using the example from @hotgeart, http://jsfiddle.net/y9sor1xc) but could only find a beta which renders correctly, I guess it uses Chromium. I haven't been able to test it myself.

Anyone against simply having Edge return a PNG? as in:

User-agent is Edge/IE = return png no matter accept headers.

Unless of course someone has a proper solution? The SVG is valid and (as per other browsers) does work.. So I'd say its a Edge issue.

[eSilverStrike]

What are the disadvantages of returning a png? If it is just the size of the file then I don't have a problem as I rather have it look correct.

[LasseRafn]

Nothing except not using SVGs 👍 I can switch it to PNG-only by checking user-agent?

[eSilverStrike]

Another negative I guess would mean that you may have to store not only svg but png files as well on your web server.

Internet explorer and Edge both suffer from this issue so you want to detect all Internet Explorer browsers and Edge up to whatever version just before they start to use Chromium. User Agent is the only way I know of.

[cwmrowe]

Anything that makes it render right is great. Doesn't really matter if it's SVG or PNG. Thanks and Merry Christmas!

[nullifiedtsk]

anyway, it looks like a bug in online api service webserver config / api since it duplicates almost all headers content

[stof]

@LasseRafn is the source code in this repo actually used ? From what I can tell, the source code here will never produce a SVG at all.

[LasseRafn]

@stof Thanks for pointing this out! Some changes were never synced 👎 I'll bring it up to date.

@nullifiedtsk This should hopefully be fixed now — however I will look into it

I'm pushing a fix soon which should make it render PNG for IE/Edge always. I don't particularly like this (as new Edge works fine) but lets do this for now and see if we can remove it in the future.

Apologies for the slow handling

[stof]

Actually, Chrome and Firefox are getting PNG, not SVG (and maybe new Edge too, but untested).

Here are the Accept header for <img> tags:

Chrome: image/webp,image/apng,image/*,*/*;q=0.8
Firefox: image/webp,*/*
IE 11: image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5
Edge 18: same than IE 11

[stof]

So to me, this says that only browsers in which we have an issue are receiving the SVG avatar, so it might be broken.

Btw, IE 11 on Windows 7 has an additional issue. due to the height attribute on the <svg> tag, it overwrites the height: auto of the <img> in CSS

[stof]

I added a parameter to force the format in #41

[LasseRafn]

@stof I'll look into the height — wondering how we will fix that though.. I dont have access to Windows 7 at the moment 👎🏻

Actually, Chrome and Firefox are getting PNG, not SVG (and maybe new Edge too, but untested).

Indeed weird! Safari passes a SVG to accept but maybe other browsers dont. Is this for newest versions?

[stof]

This is for Firefox 73.0.1 (current stable channel) and Chromium 80 (current stable)

[jcrooke]

To be clear to anyone who is getting this issue in IE11/Edge, the fix is to add &format=png on the request so that IE11/Edge gets a PNG in response. I've actually noticed that it'll randomly get back a PNG or an SVG if you do not specify &format=png.