Fluentui: Panel: Footer bottom is cut on chrome browser in Android

[mdmdakbar]

Requested priority: Low
Blocked: No

Similar to below issue for ios:
https://github.com/OfficeDev/office-ui-fabric-react/issues/5423

I also hit the same issue with ios and while debugging found the same issue exist for mobile users using chrome browser. Chrome is also following the same viewportHeight concept as Safari since 2016.

But in chrome browser in mobile, I am able to see the footer if I scroll panel up. Not blocked but I would not want a experience where my footer seems to be hidden when panel pops up.

Possibly we need a check for chrome browser in mobile and set the height to window.innerHeight there also.

[Jahnp]

@mdmdakbar Apologies for the delay, it seems this fell off the radar for a bit. Can you confirm if this still repros for you? I'm not able to repro on my iOS device at the moment, and won't be able to test on an Android until at least tomorrow.

cc @kkjeer who authored #5423 and may have thoughts here.

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!

[schemburkar]

Similar issue is occurring for me on Android for both Edge & Chrome.
The footer does not show up at all and if footer is not specified the scrolling content gets clipped.

iOS Safari seems to work fine.

"office-ui-fabric-react": "^6.163.0",
"react": "^16.8.6",

[schemburkar]

Hey @Jahnp , @kkjeer I have repo this issue using https://repl.it/@schemburkar/office-fabric-panel-scroll. The output is at https://office-fabric-panel-scroll--schemburkar.repl.co

The footer is clipped on chrome and edge on android.

See below the renders on Android, iOS

Chrome_Android

Edge_Android

Safari_iOS

Hope this helps.

Thanks,
Shubhan

[kkjeer]

Hi @schemburkar, I am also able to repro this on Android. I will continue investigating to find a fix.

[v-dhiraj]

even I am facing the same issue on iPhones. When say I render the Done button within the Footer, it is not visible. It seems the browser/visible viewport is not being considered.

[kkjeer]

@v-dhiraj which version of Fabric are you using? PR #6031 should have addressed the issue for iOS, which was released in Fabric 6.57.0.

[v-dhiraj]

Well, Yes that version did partially resolve the issue. Yet on mobile browsers specifically safari, the panel component is misbehaving.

1. The footer still gets blocked/not visible in safari, unless I manipulate the height of the component based on vh.
2. When I try to edit say any text field values inside the panel component the panel height reduces and presents an unexpected experience. Please refer to the picture attached. This does not happen on chrome browsers on iOS platforms.

[kkjeer]

@v-dhiraj thank you for providing the images. I have a few questions to dig deeper into the issues you're observing:

1. The footer still gets blocked/not visible in safari, unless I manipulate the height of the component based on vh.

Which component are you manipulating the height of? Panel itself uses maxHeight: window.innerHeight on iOS Safari (see Panel.styles.ts).

1. When I try to edit say any text field values inside the panel component the panel height reduces and presents an unexpected experience. Please refer to the picture attached. This does not happen on chrome browsers on iOS platforms.

Could you please provide a CodePen that reproduces this issue so that we can debug?

[v-dhiraj]

@kkjeer Thanks for the quick reply, here are my following comments:

Which component are you manipulating the height of? Panel itself uses maxHeight: window.innerHeight on iOS Safari (see Panel.styles.ts).

we initially did not set any height to the panel component and worked with the maxHeight property only, but that did not help us. after further investigation, I found that there is a main property within IPanelStyles which is the main section of the panel that covers the header, content and footer of the panel. Upon making the height dynamic depending on the vh value of our viewport we were able to show the footer as well within the actual viewport(i.e, the space between the address bar and navigation bar of the safari/chrome browser on mobile phones)
eg:
export const DummyPanelstyle: IStyleFunctionOrObject = {
main: {
height: 'calc(var(--vh, 1vh) * 100)'
}
};
where, --vh is (window.innerHeight * 0.01)px. This --vh value is dynamic and changes on any kind of resize event of the window.

Could you please provide a CodePen that reproduces this issue so that we can debug?

How much I wish I could you know reproduce this scenario in my local environment, but I have not been able to do so. It is only possible to reproduce it on an actual mobile phone. :/

[kkjeer]

@v-dhiraj thanks for your reply; please see below.

This is what the Panel component looks like on our website on Safari on my iPhone:

This is without any custom styling applied to the Panel. Does the Panel work as expected for you without any custom styles applied?

How much I wish I could you know reproduce this scenario in my local environment, but I have not been able to do so. It is only possible to reproduce it on an actual mobile phone. :/

We can use CodePens to debug on mobile phones. I have a sample CodePen with a Panel - could you please fork it and make any changes you need to show your scenario? Thanks!

[puco]

I can see the issue also on your website. When I open the first Panel (https://developer.microsoft.com/en-us/fabric#/controls/web/panel, Panel - Small Panel, Anchored Right, Fixed Width). When I have the address bar displayed then the buttons are not visible. When the address bar is hidden, due to the fact that I scrolled down on the page the, then buttons are visible.

Why did you decide to use { position: fixed, top: 0, height: 100vh } which exhibits this problem instead of { position: fixed, top: 0, bottom: 0 }

[kkjeer]

@puco unfortunately I am not able to repro the issue on our website. I see the following on an iPhone:

Could you share a screenshot of what you see on the website?

We do not use { position: fixed, top: 0, height: 100vh } in the Panel styles. Are these referring to custom styles applied to a Panel?

[srvsoni]

@kkjeer, this issue can repro on your website with Android mobile Chrome, when the address bar not hidden Panel bottom content cutting & even its not allow to be scroll the page.

[schemburkar]

@kkjeer Any updates? Did you get a chance to find a fix?

Get Outlook for Androidhttps://aka.ms/ghei36

From: kkjeer
Sent: Tuesday, 2 April, 1:01 AM
Subject: Re: [OfficeDev/office-ui-fabric-react] Panel: Footer bottom is cut on chrome browser in Android (#6182)

Hi @schemburkarhttps://github.com/schemburkar, I am also able to repro this on Android. I will continue investigating to find a fix.

[msft-github-bot]

:tada:This issue was addressed in #9351, which has now been successfully released as [email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site