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.
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.