How report pages are displayed in Power BI Service ( canvas, wallpaper, App, resolution, fit )

[CoreyP]

Hi fellow PBI gurus,

I have an interesting issue regarding canvas resolution and page fit and how this correlates to viewing when published in the service, specifically within an App. I'll discuss the issue and share my findings as well. 

Within the page formatting options in PBI Desktop, you can set your canvas size and background and wallpaper background. The wallpaper is the container which holds the canvas ( unusable for visualizations ). The default resolution of page canvas is 16:9, 1280x720. When you view this page in the service with a "Fit to Page" setting within an App, the service fits the canvas vertically and adjust the horizonal margins to account for this. In the below screenshot, the dark blue is the App frame, red is the wallpaper, and light blue is the canvas. 

This results in a poor aesthetic, as well as lost real estate for visualizations. 

In my attempt at fixing this, I needed to create a custom canvas size. I arrived at 1680x818. On Fit to Page, this nearly perfectly fills the entire space with useable canvas. The reason I increased the resolution from the default 1280 is to allow for more real estate for visuals; this is pretty common by developers from what I've read. 

So, that solves the issue for a canvas which doesn't need to scroll. Let's say we want a vertically scrollable canvas, like a web page, for example. So we increase our height and put in a size of 1680x2000. We can no longer use Fit to Page because that fits the canvas vertically, so we need to use Fit to Width. However, when doing so, PBI service adds a margin around the canvas allowing the wallpaper to show.

While annoying, I said to myself, we can work around this. Just make the wallpaper background color the same color as the App frame. It was then, on a dark colored wallpaper, that I noticed within the PBI service, a glow effect appears behind the canvas, which means matching the wallpaper color to the App frame color doesn't work because the glow creates a noticeable border. 

Now, I get it; I know what you're thinking. This is trivial. It's a small margin, how much impact does this really have on UX? Will my report consumers even notice, or care? Maybe it's just my OCD or pursuit of perfection that inspired me to write this post, but this is annoying. The PBI service doesn't add this margin or glow effect on Fit to Page, why oh why does it do it with Fit to Width??

If anyone has experienced the same, found a solution, or also felt annoyed by this, please comment! And for Microsoft personnel, I would love if you could shed light on this. Especially why the default is 16:9 when the viewable area in the service is not 16:9.

Much appreciated everyone! Keep on Power BI-ing!

[lbendlin · Accepted solution]

Neither Power BI Desktop nor Power BI Service give any rendering guarantees. Give your visuals enough breathing space to account for rendering differences across browsers.

If you want pixel perfect rendering you need to use Paginated Reports.

[CoreyP]

Harumph. 

I appreciate the reply! I realize with all the amazing capabilities of PBI Desktop and the service ( now the incredibly mind-blowing platform of Fabric ), complaining about this must make me come across as a PBI Karen. Reflecting now, it reminds me of a famous comedian with a hilarious bit about how people complain about the minor inconveniences that occur during air travel, and completely forget how they are soaring through the sky thousands of feet up, at hundreds of miles per hour; active participants in the miracle of flight. So, I will take the proverbial chill-pill, and be like Elsa. 

Your comment has also made me understand another issue. When placing my visuals in Desktop, countless times I'll set the dimensions and position in the formatting pane so the pixels all match. I'll then be looking at it in the service and notice a visual out of alignment by a hair. So, I'll go back into Desktop and see that PBI randomly increased or decreased a value by 1 px. Well, the rendering guarantee certainly explains that. 

Anyway, I again appreciate the response. Marking it as solution. Be well!