Issue with MS Edge about ui-avatars HOT 24 OPEN

I added a parameter to force the format in #41

from ui-avatars.

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/

from ui-avatars.

from ui-avatars.

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.

from ui-avatars.

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

from ui-avatars.

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

from ui-avatars.

No problem on my side.

from ui-avatars.

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.

from ui-avatars.

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

from ui-avatars.

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

from ui-avatars.

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.

from ui-avatars.

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

from ui-avatars.

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.

from ui-avatars.

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.

from ui-avatars.

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.

from ui-avatars.

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

from ui-avatars.

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

from ui-avatars.

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

from ui-avatars.

@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

from ui-avatars.

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

from ui-avatars.

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

from ui-avatars.

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

from ui-avatars.

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

from ui-avatars.

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.

from ui-avatars.