Visual layering and sizing seems to be skewed

[ashleyfiore]

Visuals are not maintaining layering orders and text is not maintaining sizing.

[DerekLedbetter]

This is still an issue for my company.

What is an ETA of a resolution for this major issue?

[ashleyfiore]

@v-caitlyn-msft & @v-xiaoyan-msft, 

After some additional research I have identified the problem. The padding in cards and icons in the March 2023 release was updated to show a default of 5px which is causing this issue. When I remove the padding around each visual the obstructed view resolves itself. 

There is no way to update this setting in the json theme - is there another way to update this progromatically? 

Additionally, there is another related case on this board that references this same issue. 

[gruszmen]

We've also experiencing this issue. It's hard to get why this isn't fixed in more than a month...

[nesxgreen]

Hello,

Do we have an update on this issue ?

I have the issue also on slicers so the padding workaround does not work for me.

https://community.powerbi.com/t5/Issues/PBI-Embedded-Visuals-not-displayed-correctly-cropped/idi-p/3...

[ashleyfiore]

Below is the response we received from Microsoft for the related support case we had open with them. Preliminary testing of the suggested midigation is promising. 

High-level problem 

For embedded Power BI reports that are used in a tabbed interface (example from Bootstrap), preloading or embedding a report in DOM that isn’t currently visible may experience their visuals resized incorrectly when they are eventually shown. 

The cause of this is an erroneous check in jQuery that determines the browser is IE9 and tries to again resize elements to ensure compatibility in that browser.  This jQuery check has been removed in recent versions of jQuery (00a9c2e5) and we are working to verify that by updating jQuery in Power BI, we can eliminate this issue.   

We suspect that this issue was exposed via recent browser performance updates to the Chromium engine (which powers both Chrome and Edge browsers), which report sizes of elements not yet drawn instead of prompting a re-render (“reflow”) that takes additional processing time. 

Important: we believe this problem to be localized to embedded reports being shown/hidden in a tab-like interface using “display: none” on DOM holding an iframe of a Power BI report.  If this isn’t the case, please provide a reproducing example. 
 

High-level mitigation 

With a local minimal reproduction developed, we determined that a mitigation that embedded developers can take is to only load embedded content when the containing DOM is not being hidden by “display: none.”  This will ensure that zero-width content will not be rendered. 

For example, in a tabbed layout, only the embedded report in the currently-active and displayed tab should be loaded.  When a hidden tab’s content is loaded, then JavaScript should be executed to load that report once the containing DOM is visible. 

The attached report-buggy.html and report-fixed.html demonstrates the buggy condition and a suggested manner to fix the issue.  To reproduce the problem/solution locally, update <report_id>, environment, and <access_token>. 

In report-buggy.html, letting Iframe1 load, then clicking on Iframe2 will occasionally show that items in Iframe2 are mis-aligned (usually width/height reduced by padding + border sizes of the containing visuals).  This happens about 20-30% of the time; reload and retry if not observed. 

In report-fixed.html, this mis-alignment is never observed, regardless of whatever tab is shown first and the order in which the buttons are clicked.  It is not necessary to delay loading an embedded report in the initial frame if the initial tab is guaranteed to be visible.