Section height wonky in iOS when using flex elements

[kirkbross]

Description

Section (slide) height seems to be off in iOS as if it's not accounting for the address and / or bookmarks bars. So, if something is absolutely positioned to the bottom of slide, it will be off the bottom of the screen.

Link to isolated reproduction with no external CSS / JS

[Ideally in jsfiddle.net (https://jsfiddle.net/alvarotrigo/ea17skjr) or codepen.io (https://codepen.io/alvarotrigo/pen/NxyPPp), links to personal websites won't be reviewed unless isolated. Reported issues without a reproduction might get closed.]

https://jsfiddle.net/kirkbross/mk138yjb

Steps to reproduce it

1. View on an iPhone (maybe Android too).
2. Notice footer text cut off when it's positioned: absolute in section 2 / slide1 and margin-bottom in section 3 (flex).

This may be...

An iOS address bar thing, but I would think fullpage would have some explicit @media querries like:

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
   height: 768px;
 }

Versions

iPad Pro / latest 13,11 iOS

Please...

Shake your fist at the sky and curse my name if this is entirely my issue.

[alvarotrigo]

Loading the site in vertical looks just fine for me using Safari / Firefox / Chrome on iPhone:

Loading the site un horizontal looks good too:

Also tested using Browserstack.com as well. Working fine?

I've uploaded your reproduction here so we can have a testable link: https://alvarotrigo.com/fullPage/prueba/examples/bug-3746.html

[kirkbross]

I figured it out.... you can close this. I'm 99.9% sure it's a plain css mistake. I don't understand why, but it's not your problem! :)

I had an image inside an wrapper div and that was inside the .slide > .fp-tableCell .

A stupid mistake, but I'm not sure why the img itself wasn't obeying the max-height: 100% and max-width: 100% and instead expanding the slide / fp-tableCell.

Here's an updated fiddle with the behavior. If you remove the image-wrap and just have the image directly in .fp-tableCell it works as expected.

https://jsfiddle.net/kirkbross/mk138yjb/

Note

This is not a FPjs issue -- just a plain CSS mistake, I think maybe related to having a flex element inside a display: table-cell element, though not exactly sure.

[alvarotrigo]

This is not a FPjs issue -- just a plain CSS mistake, I think maybe related to having a flex element inside a display: table-cell element, though not exactly sure.

Yeap that seems to be the case. Probably it is because of display: flex;.

display:block should be enough to fix it I believe.

Perhaps we should test this a bit more to see what's really going on with the flex property. I'll keep it open for further review.

Thanks for reporting it!