Flex-layout: IPad Rendering Issues -- flex ordering and nested fxFlexFill

[mmartimo]

I have an application that is experiencing a couple issues (hopefully just user error???) as demonstrated at: https://plnkr.co/fcsPtbnXVVxTmTuVcpoa

With the desktop versions of Chrome or Edge, the application shows as:

However on an iPad with either Safari or Chrome it shows as:

First issue is the ordering of the flex div... on the desktop it shows (as desired) in the order in the HTML, on the iPad the plain fxFlex (yellow) shifts to the bottom.
<div fxFlexFill fxLayout="column" fxLayoutAlign="start stretch">
<div fxFlex="100px"...>
<div fxFlex="100px"...>
<div fxFlex></div>
<div fxFlex="100px"...>
</div>

Second issue is the nesting of a fxFlexFill div... on the desktop it shows as all blue (as desired), on the iPad it sizes to the content (small blue div in large black area).
<div fxFlex style="background-color:black; color: white;">
<div fxFlexFill style="background-color:blue; ...>
</div>

[intellix]

Safari doesn't support Flex :)

[mackelito]

@intellix http://caniuse.com/#search=flex%20box

[mackelito]

This problem will also appear on Safari on Mac.
Perhaps this will give you some idea to a solution: https://plnkr.co/edit/DT8oplpg68QCriPbgQKQ?p=preview

Happy coding! :)

[intellix]

Sorry, it annoys me that caniuse claims it's supported yet height is not inherited like in eveeery other browser :D
Related: https://github.com/angular/flex-layout/issues/103 https://github.com/angular/flex-layout/issues/162 https://github.com/angular/flex-layout/issues/201

[mmartimo]

I'm really sorry, but I'm really stuck... somehow I am missing something fundamental.

@mackelito I'm not sure what to take away from the fork to my Plunker you prepared. Beyond the "display: block;" on the body?

I get the concept that the parent needs to have height defined to calculate/display correctly in safari... I however don't observe any difference when attempting to implement others' solutions via issues 103, 162, 201. I have an updated Plunker where I've attempted each of the following with no change in display:

1. add "display: block;" to full screen body and friends to initialize.
2. For any naked "flex" that could be a "column", add style="flex: 1 1 100%; min-height:100vh;" to the element.
3. Add "flex: 1 0 auto !important;" to the parent layout elements that are not correctly being filled to their children's heights.

https://plnkr.co/VxJ7CHEDRK04j65uaytn

Thanks for your patience with me... any additional guidance is very much appreciated.

[HarelM]

I had what I believe is a similar issue.
See the following issues:
https://github.com/IsraelHikingMap/Site/issues/461
https://github.com/IsraelHikingMap/Site/issues/458
What solved the problem for me was to remove all usages of flexLayout='column' from the html.
You can see the relevant commits related to these issues.

Any plans to fix this?
This is affecting iPhone and iPad users - which is a big portion of my mobile traffic...

[sofarojo]

Having this problem on Safari on MAC. This is not only a IPhone/Ipad issue.

Is it possible to raise the priority? Thanks :)

[CaerusKaru]

The Plunkrs no longer work. Can anyone confirm if this is still an issue with the latest beta?

[CaerusKaru]

I'm going to close this issue. We can reopen if someone else runs into this and can produce a new demo.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}