iPhone X header buttons shifted down issue

Hi Folks,

Header buttons shifted down on iPhone X only and for other devices iPhone and even iPhone X(R) working fine.

I did not test on iPhone X(S).

Please see the  image below for iPhone X device header button issue

Kindly provide the solution for this issue.

Thanks

Camila Teixeira wrote:

Hello Meer,

Maybe this helps: https://www.outsystems.com/forums/discussion/46064/mobile-fullscreen-on-iphone-x-xs-xr/.

Hi Camila,
Greetings!

Thanks for reply.

I have read this link before also.

And I have added bellow lines in CSS

body {
   padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
   padding-top: env(safe-area-inset-top); /* iOS 11.2 */
}


This worked for all iOS devices except iPhone X and iPhone Xs both has same resolution i.e. 1125px × 2436px.

This header issue is happening even you add or remove body{ } (see above mentioned)  from CSS, no effect at all for iPhone X and iPhone Xs devices.


Kindly help me to resolve this.

Thanks

Meer Imtiyaz wrote:

Camila Teixeira wrote:

Hello Meer,

Maybe this helps: https://www.outsystems.com/forums/discussion/46064/mobile-fullscreen-on-iphone-x-xs-xr/.

Hi Camila,
Greetings!

Thanks for reply.

I have read this link before also.

And I have added bellow lines in CSS

body {
   padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
   padding-top: env(safe-area-inset-top); /* iOS 11.2 */
}


This worked for all iOS devices except iPhone X and iPhone Xs both has same resolution i.e. 1125px × 2436px.

This header issue is happening even you add or remove body{ } (see above mentioned)  from CSS, no effect at all for iPhone X and iPhone Xs devices.


Kindly help me to resolve this.

Thanks

Hi


Any update on my request, please do fast because I have stuck to submit app due to this small issue.



Meer Imtiyaz wrote:

Meer Imtiyaz wrote:

Camila Teixeira wrote:

Hello Meer,

Maybe this helps: https://www.outsystems.com/forums/discussion/46064/mobile-fullscreen-on-iphone-x-xs-xr/.

Hi Camila,
Greetings!

Thanks for reply.

I have read this link before also.

And I have added bellow lines in CSS

body {
   padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
   padding-top: env(safe-area-inset-top); /* iOS 11.2 */
}


This worked for all iOS devices except iPhone X and iPhone Xs both has same resolution i.e. 1125px × 2436px.

This header issue is happening even you add or remove body{ } (see above mentioned)  from CSS, no effect at all for iPhone X and iPhone Xs devices.


Kindly help me to resolve this.

Thanks

Hi


Any update on my request, please do fast because I have stuck to submit app due to this small issue.



Sorry I can't help you, for me is working with that code. 

You can't debug?


Camila Teixeira wrote:

Meer Imtiyaz wrote:

Meer Imtiyaz wrote:

Camila Teixeira wrote:

Hello Meer,

Maybe this helps: https://www.outsystems.com/forums/discussion/46064/mobile-fullscreen-on-iphone-x-xs-xr/.

Hi Camila,
Greetings!

Thanks for reply.

I have read this link before also.

And I have added bellow lines in CSS

body {
   padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
   padding-top: env(safe-area-inset-top); /* iOS 11.2 */
}


This worked for all iOS devices except iPhone X and iPhone Xs both has same resolution i.e. 1125px × 2436px.

This header issue is happening even you add or remove body{ } (see above mentioned)  from CSS, no effect at all for iPhone X and iPhone Xs devices.


Kindly help me to resolve this.

Thanks

Hi


Any update on my request, please do fast because I have stuck to submit app due to this small issue.



Sorry I can't help you, for me is working with that code. 

You can't debug?



Actually this issue is happening in iPhone X and iPhone X(S) but not in iPhone X(R) and others too.