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.
We recently started experiencing the same rendering issues with embedded reports as described here
Slicer dropdowns are overlapping their title fields:
Correct:
Incorrect:
Overlapping text on xaxis:
Correct:
Incorrect:
Additionally, the timing descibed here matches ours - everything was looking good this past Saturday (9/21) and starting appearing incorrectly on Sunday (9/22). I am confirming, but I believe the version of Power BI Desktop that was used to publish the reports was also update this past Sunday
We are not seeing the issue come and go, however, we are seeing it on some browsers and not others. It seems to always look correct in Firefox. In Chrome, sometimes it will render correctly, but sometimes it won't. Only the embedded reports show this issue; Power BI desktop, etc all look correct
We tried the steps outlined in one of the answers here (clearing browser cache, latest versions and removing CSS) and it did not help. Note that we are not using Next.js
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.