Slicer search icon not displaying in Chrome

[clehnert]

Hi all,

I'm running into a strange issue in embedded reports where the magnifying glass icon in the search bar of a slicer will display just fine in Firefox, but does not display properly in Chrome or Edge.

Here is the same slicer in the same report, when viewed from:

Firefox

Chrome/Edge

We would like that icon to display properly in all 3 browsers, but I haven't had any luck thus far finding info on how to fix this problem. When I pop open the inspector, it looks like in Chrome/Edge the icon is just hidden off to the side, like so:

Whereas in Firefox, it looks just fine:

As best I can tell, the styling on the elements is exactly the same. Both have the same flex settings, and neither should be influenced by any styling on the page they're embedded in.

Does anybody have any insights as to what might be causing this, and if there's anything I can do from within Power BI Desktop to fix this so that it displays properly in Chrome/Edge? Any advice would be appreciated, thank you!

[v-weiyan1-msft]

Hi @clehnert ,

Based on the information you've provided, it seems like this may be a browser rendering issue, especially since Chrome and Edge handle certain CSS properties or web components differently than Firefox. The rendering of Power BI can sometimes be affected by the underlying browser behavior, especially under complex visuals or customizations.
Please try to keep both Chrome and Edge up to date to avoid problems caused by the version.
Sometimes browser caching can cause problems when loading content dynamically. You can try clearing your browser cache to see if that helps.

Best Regards,
Yulia Yan

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

[clehnert]

Hi @v-weiyan1-msft 

Thanks for the suggestion! Unfortunately, after making sure that both Chrome and Edge are on the latest version on my machine and clearing the cache for both, I am still seeing this issue.

Since this is happening in reports even that don't have complex visuals or customizations, I think you're correct that this just boils down to a difference in underlying browser behavior. In the mean time, the only thing I've been able to do to get the icons to reliably show is just widen the slicers until they take up roughly 1/6 of the page width, although the exact amount seems to vary a bit. It might be something to do with the aspect ratio of the canvas?

That being the case, I'm going to mark my other comment as a solution, since that's the only thing that has worked for me. Thanks again for your help!

[clehnert · Accepted solution]

We found a workaround, which was to make all slicers at least 205px wide roughly 1/6th the width of the canvas, with no padding. The downside of this is that our slicers are a decent bit wider than they need to be now, but this will do the trick. I do think this might just be a minor bug that needs addressing at some point though.

Marking this as a solution for now since we haven't found any other way to address this yet.