Mozzila browser not showing image on accordion

[lukapeteh]

Hello,

we are building a website and ran into a problem.

We are using a build in accordion and want to change the icon “+” for opening item to our own image.
Please check the link on Google Chrome and then Mozzila.

With Chrome everything works like it should. When the item is not clicked it shows a plus image, when opened it shows minus image. But when checking the page in Mozzila there is always only a plus image visible.

Best regards
Luka

Summary

Website link - https://metronik.netx.si/farmacija/
CSS that we are using:
[data-x-icon]:before, [class*=“x-icon-”]:before {
content: url(’/wp-content/uploads/2018/07/metronik-podrocja-dela-razsiri-meni-crna_2-8.png’);
}
.x-acc-header .x-acc-header-indicator{
content: url(’/wp-content/uploads/2018/07/metronik-podrocja-dela-razsiri-meni-crna_2-8.png’);
transform: translate3d(0,0,0) rotate(0)!important;
width: auto!important;
height: 1em!important;
font-size: 0.8em!important;
}

.x-acc-header.x-active .x-acc-header-indicator{
content: url(’/wp-content/uploads/2018/07/metronik-podrocja-dela-zapri-meni-crna_2-8.png’);
transform: translate3d(0,0,0) rotate(0)!important;
width: auto!important;
height: 1em!important;
font-size: 0.8em!important;
}

[christian]

Hey Luka,

The reason why it doesn’t work is because the x-active class is not being applied to the accordion header only in Firefox. Looks like there’s a modification in your site or a third party plugin is causing this. It’s not a bug because I’ve just tested the Accordion element and it works.

Please try testing for a plugin and scripts conflict. Regretfully, since this involves customization, we could not continue with troubleshooting as this is outside the scope of our support.

Thank you for understanding.

[lukapeteh]

Hi Christian,

thanks for the reply.

I disabled all the plugins and the problem remains.
We only added some CSS, can this create the problem?

Best regards

[Alaa]

Hi @lukapeteh

I believe your CSS code isn’t correct, please replace all your custom CSS code that’s related to this customization with this one:

.x-acc-header .x-acc-header-indicator [data-x-icon]::before, [class*="x-icon-"]::before{
content: url('/wp-content/uploads/2018/07/metronik-podrocja-dela-razsiri-meni-crna_2-8.png');
transform: translate3d(0,0,0) rotate(0)!important;
width: auto!important;
height: 1em!important;
font-size: 0.8em!important;
}

.x-acc-header.x-active .x-acc-header-indicator [data-x-icon]::before, [class*="x-icon-"]::before{
content: url('/wp-content/uploads/2018/07/metronik-podrocja-dela-zapri-meni-crna_2-8.png');
transform: translate3d(0,0,0) rotate(0)!important;
width: auto!important;
height: 1em!important;
font-size: 0.8em!important;
}

This should work fine on Chrome as well as Firefox.

Thanks.

[lukapeteh]

Thanks it works. You are the man!

Now we just need to figure out why the icon/image when clicked rotates 90’ …

Thanks again

[Prasant]

Hello @lukapeteh,

Thanks for updating the thread.

I checked your website on Firefox and I don’t see 90 degree rotation on my end. Please see screencast. Can you please elaborate the point you trying to make?

Thanks