Change logo when scrolled but not in Firefox

Hi, yes, I am adding this feature in a future update and I remember having to solve a Firefox issue. I’ll find the code I use and get back with you here tomorrow.

This is the code I use, hopefully it helps you out.

.she-header .elementor-image img {
content:url('https://mashfolio.com/wp-content/uploads/2019/06/mashfolio-logo-light-blue-e1561216083245.png') !important;
width: auto !important;
/* height of initial logo */
height: 60px !important;
transition: height 0ms ease-in-out 500ms !important;
 -moz-transition: height 0ms ease-in-out 500ms !important;
}

/*firefox fix*/
.she-header .elementor-image {
content:url('https://mashfolio.com/wp-content/uploads/2019/06/mashfolio-logo-light-blue-e1561216083245.png') !important;
background-size: contain;
width: auto !important;
/* height of replacement logo */
height: 50px !important;
transition: height 0ms ease-in-out 500ms !important;
 -moz-transition: height 0ms ease-in-out 500ms !important;
}

.she-header .elementor-element .elementor-widget-container img {
 transition: height 0ms ease-in-out 500ms !important;
 -moz-transition: height 0ms ease-in-out 500ms !important;
}

Hi, thanks for your reply. It works with Firefox so the problem is solved. But I noticed that the issue remains with Microsoft Edge and Explorer. Is there a code also for them?

IE isn’t supported by elementor or anybody for anything really. I’ll double check edge and opera to make sure it works and write new code if needed.

Thanks! Looking forward to your code ??

@acecube Hi, sorry for the delay. I checked your site and completely forgot to reply I’ve been so busy. I found that edge and opera are working fine on my end. I’m running the most current “new” edge with the green and blue swirl logo. I can install the old version of edge if you like but I think most people are being prompted to update.
If you are still finding problems or want to test on anything else just let me know. Thanks!

Hi Robert,
thanks a lot for your answer. Edge and Opera work fine with my site just because i used a workaround to solve my issue. I don’t use your code, I simply use two headers: the first one is a common not sticky bar. When you scroll down a second header appears. It happens very fast so it seems that they are the same bar. Obviously in the first bar I’ve put the first version of the logo, in the second there is the second version. I hope this solution could be useful to everyone who has my same issue.

Thanks again for your help, I hope you’ll solve the compatibility issue in your plugin, that’s already very helpful to me.