topic Re: Logo doesn't look good in IE in ArcGIS Web AppBuilder Questions

Logo doesn't look good in IE

MattiasEkström — Fri, 22 Jan 2016 07:47:46 GMT

Anyone else that have problems with the logo in Internet Explorer?

In all other browser I've tried my logo displays as expected, but in IE it doesn't.

I've tried different file formats and sizes but it's still the same, and I've tried different devices and browser versions. And the result is always the same, in IE regardless of version the logo doesn't look good at all.

Any ideas how to solve this?

Logo in IE:

Logo in other browsers:

Re: Logo doesn't look good in IE

JayantaPoddar — Fri, 22 Jan 2016 08:55:22 GMT

Check if the following changes in the I.E. settings, has any effect on the display.

Enable software rendering
Open Internet Explorer and press the “Alt” key to show the menu bar. Click “Tools,” select “Internet Options,” and then choose the “Advanced” tab. Click the “Use software rendering instead of GPU rendering” box and then click “OK” to save your changes. Check to see if the issue has been resolved.

Re: Logo doesn't look good in IE

AveKargaja — Fri, 22 Jan 2016 09:07:37 GMT

Interesting, as I've never noticed any kind of difference in the logo design using different browsers (though I must say my organizations logo is also a lot simpler than Yours), then I just had to recheck and I must say that it is excactly the same in different browsers (IE, FF, Chrome, Safari, Opera) in my case (WAB 1.3).

Is Your IE zoom size the default 100%? (Ctrl+0)

Re: Logo doesn't look good in IE

MattiasEkström — Fri, 22 Jan 2016 09:20:32 GMT

Enabling software rendering did not have any effect on the display.

Re: Logo doesn't look good in IE

MattiasEkström — Fri, 22 Jan 2016 09:27:32 GMT

Yes the zoom size is 100%, however using 400% it actually looks good
My logo is detailed and there's to few pixels for it, but all other browser can handle the downsizing fairly good, why can't IE?

Re: Logo doesn't look good in IE

AveKargaja — Fri, 22 Jan 2016 09:54:12 GMT

OK, but what happens when You resize the logo to the actual size that the WAB uses and/or change the logo format?

Re: Logo doesn't look good in IE

JayantaPoddar — Sat, 11 Dec 2021 10:26:55 GMT

Try adding a CSS properties inline in I.E.

Not-Terrible Image Resizing in IE | CSS-Tricks

img {
   -ms-interpolation-mode: bicubic;
}

Re: Logo doesn't look good in IE

MattiasEkström — Fri, 22 Jan 2016 11:56:47 GMT

I guess this would require the developer version of WAB right? I'm currently workning only with the AGOL-version.
Or where is the CSS-code supposed to be added?

Re: Logo doesn't look good in IE

JayantaPoddar — Fri, 22 Jan 2016 12:04:46 GMT

Maybe this will help

http://stackoverflow.com/questions/6569846/ies-f12-developer-tools-add-new-css

Re: Logo doesn't look good in IE

MattiasEkström — Fri, 22 Jan 2016 12:19:52 GMT

When I resize the original image to the actual size WAB uses (don't now exactly but I used 33 pixels in height), It looks the same in IE as other browser. So it must be IEs way of downsizing a larger image that is causing this. The end result actually looks better in for example Chrome when using a larger image and let the browser handle the downsizing. I mostly use Chrome so that's why I used a larger image from the beginning, tried different version och noticed that a lager image was better.

I guess I just have to decide if I want it OK in all browser or ugly in IE and nice in all other

Re: Logo doesn't look good in IE

MattiasEkström — Fri, 22 Jan 2016 12:42:31 GMT

Thanks, but I was not able to add that certain css in the developer tool, I was able to some simple as height: 100%; for img but not
-ms-interpolation-mode: bicubic;

Re: Logo doesn't look good in IE

JayantaPoddar — Fri, 22 Jan 2016 12:44:27 GMT

What version is ur I.E.?

Re: Logo doesn't look good in IE

MattiasEkström — Fri, 22 Jan 2016 12:46:41 GMT

The one I'm currently using is version 10.0

Re: Logo doesn't look good in IE

RobertScheitlin__GISP — Sat, 11 Dec 2021 10:26:58 GMT

Mattias,

The logo size is set to 30x30 in the widget.js file:

        var logoNode = html.create('img', {
          'class': 'logo jimu-float-leading jimu-leading-margin1',
          src: this.appConfig.logo ? this.appConfig.logo : this.folderUrl + 'images/app-logo.png',
          style: {
            width: '30px',
            height: '30px',
            marginTop: ((this.height - 30) / 2) + 'px'
          }
        }, titleNode);

So my advice would be to take your logo and in photoshop or equivalent reduce the logo using bi-cubic to 30 x ?? then the browsers will not have to attempt any re-sampling themselves and you will be good to go across all browsers.

Re: Logo doesn't look good in IE

MattiasEkström — Fri, 22 Jan 2016 13:17:15 GMT

I will look at my available image software and try to find some settings for the scaling, and save an 30px height image with as good quality as possible.
I consider this thread answered but I'm not sure which post I'm suppose to mark as the answer... Robert usually gets the correct answers so I'll give this one to Ramon
Thank you all.

Re: Logo doesn't look good in IE

RobertScheitlin__GISP — Fri, 22 Jan 2016 13:47:44 GMT

Mattias,

If you find you do not have access to image software that will do this well then you can attach the image and I will do it in Photoshop for you.

Re: Logo doesn't look good in IE

MichaelRobb — Mon, 25 Jan 2016 15:36:53 GMT

Handy Image editor, even does Transparency etc..

Free Online Image Editor