Microsoft Edge Not Showing logo in Header (png file)

[optobiolabs]

Hi @Rad,

you asked me to open a new thread for this topic (https://theme.co/apex/forum/t/microsoft-edge-not-showing-images/7754/5), so here we go:

Microsoft Edge does not show the image (logo of opto biolabs) in the header, but chrome does:
http://wp.optobiolabs.com/science.

How can I solve this problem?

BR
Raphael

[thai]

Hi There,

It seems like the Edge browser doesn’t work with the width: auto of images.

To fix this issue, please add this custom CSS under Theme Options > CSS:

.x-image-preserve-ratio img {
     min-width: 270px;
}

Hope it helps

[optobiolabs]

Hi @thai,

thank you. The logo is now also shown in Edge browser. However, the logo is now distorted, when I scroll down the page and the header (and with it the logo) is downsized due to sticky bar settings:

I would like to keep the sticky bar with perfectly resizing image. Is that possible?
Many thanks.

Raphael

[rad]

Hi @optobiolabs,

Hmm, looks like it’s not completely achievable in Edge due to flex styling. But, you can make the CSS edge specific not affecting the other browsers. Please change it to this

@supports (-ms-ime-align:auto) {
.x-image-preserve-ratio img {
     min-width: 270px;
}
}

A side question, have you tried changing the image size in the header builder?

Thanks!

[optobiolabs]

Hi @Rad,

many thanks. That works. At least the logo is now shown in Edge as well and still resized properly in Chrome browser.
I tried quite a few things with the image. Different sizes and formats, as well as different pictures. Always with the same result - no logo shown.

Let me know in case you find another solution where the resizing also works properly in Edge browser.

BR
Raphael

[christian]

Hey Raphael,

I investigated this further because a while back, our development team has said that the builder’s code is compatible with modern browsers so we need to know if this is a bug or not.

I saved your bar as a template and loaded it in my test site and the issue persists. The weird thing is, I just disabled the link option and re-enabled it again and the issue was fixed. It looks like there’s some corruption in the builder’s data.

And even weirder, I didn’t edit your header but when I removed the code @Rad gave, your logo shows up in Edge.

It looks like you were editing the header while I was investigating because I saw 2 bars. It looks like when you edited, the builder’s data got fixed.

You also did not copy all of @Rad’s code (you forgot the closing brackets) and doing so would cause you future issues. I only see you copied this:

@supports (-ms-ime-align:auto) {
.x-image-preserve-ratio img {
     min-width: 170px;

Thanks.

[christian]

Update: Sorry. My colleague have also been investigating at the same time and he duplicated the bar for testing. That is when the logo image was fixed the the header builder’s data was regenerated during saving. Editing the bar and saving was also the method that fixed the logo in my test site.