Unanswered

Black Box appears when Form is Embedded in a Page using Chrome

(0) Share

Report

Posted on by Marqiux

All of our forms are embedded within site pages.

All of a sudden, users are seeing a black box typically at the bottom of the form when using Chrome.
Does anyone know what the root cause is and how to fix it?
This was working fine a few weeks ago? Nothing was changed or updated on the forms - What gives??

If I zoom out the browser to say 90%, 80% or so, then the black box goes away...
We've made sure the form settings (size matches the size of the form panels)

This works well with FireFox and Edge... IE the behavior is sporadic.

Categories:

Building Power Apps

I have the same question (0)

All responses (10)

Answers (0)

Sort by

cchannon 4,702 Moderator on at

Like
a
(0)

Report
Copy link

Link copied!
Looks like the frame in which you have embedded your app is taller than your app.

PowerApps by default locks the aspect ratio of your apps, so if the canvas on which you've dropped it is of different proportions than the app itself, you'll wind up with bars at top, bottom, or sides, depending on how the fit is. Most likely, the issue is that the panel is bigger than the browser scales for by default, so the poweapp gets squished at the sides, which causes it to scale down, which leaves you with the black box. When you zoom out, you open more space at the sides, which gives the app room to rescale and fill the available vertical space.

I do have good news though:
The PowerApps team is working right now on bringing us Liquid sizing that will allow you to dynamically control the sizing and layout of your app components to always fill the available space appropriately
Until they do, the following fix might work for you (although it can cause some distortion of app element sizing, so test it before you push it to prod!)
Open your app in Edit mode and go to File --> Settings --> Screen Size + Orientation
Set Scale To Fit to OFF. This will prevent the app from resizing and creating that black box, but it will also turn off locking the aspect ratio, so as always: TEST TEST TEST - depending on what is in your app, the distortion might be totally unnoticeable, or it could cause it to look like complete garbage. Make sure you know which it will be!

Was this reply helpful? Yes No
Marqiux 54 on at

Like
a
(0)

Report
Copy link

Link copied!

Hello cchannon,
Thank you for replying 🙂

I don't seem to have the "Scale To Fit" feature in my view.... See attached screen shot.
It's also not in Advance Settings, unless is called something else...

Thanks again

Was this reply helpful? Yes No
cchannon 4,702 Moderator on at

Like
a
(0)

Report
Copy link

Link copied!

There should be an "Advanced Settings" section right underneath those resolution settings (not the one in the left nav). Your screenshot is clipped on the right side; is there a scrollbar that would let you go down maybe?

Was this reply helpful? Yes No
Marqiux 54 on at

Like
a
(0)

Report
Copy link

Link copied!

@cchannon I took additional screen shots, please take a look.

Was this reply helpful? Yes No
Enigmike 5 on at

Like
a
(0)

Report
Copy link

Link copied!

We're seeing the same issue with PowerApps forms embedded in SharePoint pages on Chrome. Turning "Scale to Fit" off doesn't have any impact.

Seems to have started happening with the latest Chrome version update.

Is anyone else affected by this?

Was this reply helpful? Yes No
dekendiz 14 on at

Like
a
(1)

Report
Copy link

Link copied!

Seems like a lot of people are having this issue, including me!

https://powerusers.microsoft.com/t5/Building-Power-Apps/Black-screen-appearing-when-scrolling-down-the-page-using-chrome/td-p/578308

Was this reply helpful? Yes No
richdiMSFT Microsoft Employee on at

Like
a
(1)

Report
Copy link

Link copied!

Hi Marqiux,

Thanks for reporting the issue. It seems that with a recent change between Power Apps and the chromium rendering engine some embedded scenarios will show a black box. Most prevalent when scrolling to down a part of the bottom of the app will get a black box overlay. We are researching the issue to try and find a fix.

Sorry for the pain,

Rich Dickinson

PM Power Apps

Was this reply helpful? Yes No
Marqiux 54 on at

Like
a
(0)

Report
Copy link

Link copied!

@richdiMSFT ,
Thank you so much - I'll await for your response

Was this reply helpful? Yes No
CarloNavarro 44 on at

Like
a
(0)

Report
Copy link

Link copied!

this is the same issue I posted in this link. I hope Microsoft fix this as soon as possible. https://powerusers.microsoft.com/t5/Building-Power-Apps/Black-screen-appearing-when-scrolling-down-the-page-using-chrome/m-p/592444/highlight/false#M185885

Was this reply helpful? Yes No
richdiMSFT Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!

Hi Carlo,

We have identified that this is a bug in chromium we investigating how we can workaround it in our code. Along with trying to identify the specific issue in chromium.

I will keep the common issues documentation updated as we make progress.

Thanks for your patience,

Rich Dickinson

PM Power Apps

Was this reply helpful? Yes No