Forum Discussion
Title and Axis Problem with PBI Embedded Reports
After seeing that the reports rendered correctly when placed as the only element on a page, I conducted further testing with my application and realized that the report worked fine when rendered in a div that did not have any "hidden" tag above it (I am using Tailwind CSS). This tag is equivalent to "display:none" in CSS.
In the following link provided by Microsoft support: Best Practices for Embedded Power BI Performance, it is mentioned in the "Bootstrapping the Iframe" section that, for now, "display:none" should be avoided as it can lead to erroneous results.
As a workaround, I restructured my application to avoid using display:none, and now everything is working fine again.
It's worth mentioning that my app had been functioning properly for months until the weekend of 9/20. However, seeing that this issue is already documented in the article mentioned, it seems that the problem with this tag has been around for some time.
Today I've been told that the Power BI team is aware of the issue and is already working on it. By the moment I'm just waiting and refreshing my app.
Have there been any updates on this, and/or is there a separate ticket/issue somewhere that we could track outside of this forum posting?
Hi manaray,
I went back to troubleshoot the issue on my own to see if I could find a workaround. It turns out that the problem lies in the CSS, specifically within styles being applied directly inside the iframe. Below is a screenshot of the title's div; as you can see, it's setting a height of 0px.
When I manually adjusted it in the console, the title rendered correctly.
A similar issue seems to be happening with the axis.
The challenge here is that the style is being applied directly to the div, not through a class. Also, my app is working fine on Mozilla and Safari, the divs have the correct height there which leads me to believe this could be an issue with V8.
I'm currently in touch with the Microsoft team and will keep you posted on any updates.
After seeing that the reports rendered correctly when placed as the only element on a page, I conducted further testing with my application and realized that the report worked fine when rendered in a div that did not have any "hidden" tag above it (I am using Tailwind CSS). This tag is equivalent to "display:none" in CSS.
In the following link provided by Microsoft support: Best Practices for Embedded Power BI Performance, it is mentioned in the "Bootstrapping the Iframe" section that, for now, "display:none" should be avoided as it can lead to erroneous results.
As a workaround, I restructured my application to avoid using display:none, and now everything is working fine again.
It's worth mentioning that my app had been functioning properly for months until the weekend of 9/20. However, seeing that this issue is already documented in the article mentioned, it seems that the problem with this tag has been around for some time.
Based on your post, I confirmed that the issue for us was also caused by the hidden class (we're using Tailwind as well) which we were using to implement a custom loading screen prior to the report loading.
I was able to replace hidden (display:none) with invisible (visibility:hidden) and some slight CSS adjustments to retain our existing UI. Those changes solved both issues we were seeing: slicer titles at 0 height and strange offsets on graph x-axis.
I greatly appreciate you continuing to update this thread as I was unable to find this issue noted anywhere else, we were essentially blocked waiting for a "fix" from Microsoft.