Flex-layout: fxFlex on Safari

[emamdouh]

Bug Report

What is the expected behavior?

Content should auto position in the center of the page when resizing using a centred fxLayout container.

What is the current behavior?

On Chrome and Firefox it works fine: content is repositioned at center as you resize.
On Safari 12.1.1 it does not: content is fixed at the center of the initial view regardless of resizing (til you interact with the page, clicking a button for example)

What are the steps to reproduce?

Could not make it work on StackBlitz, but here is a simple version of the code

<div fxLayout="column" fxFlexFill>
<div fxFlex>
<div fxLayout="column" fxLayoutAlign="center center" fxFlexFill>
<p> Start editing to see some magic happen :) </p>
</div>
</div>
</div>

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/animations": "~8.0.3",
"@angular/cdk": "^8.0.1",
"@angular/common": "~8.0.3",
"@angular/compiler": "~8.0.3",
"@angular/core": "~8.0.3",
"@angular/flex-layout": "^8.0.0-beta.26",
"@angular/forms": "~8.0.3",
"@angular/material": "^8.0.1",
"@angular/platform-browser": "~8.0.3",
"@angular/platform-browser-dynamic": "~8.0.3",
"@angular/router": "~8.0.3",
"core-js": "^2.6.9",
"hammerjs": "^2.0.8",
"rxjs": "~6.5.2",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"

[step4]

Not only on Safari, but on Safari on iOS and Samsung default browser the same problem exist.

I fixed it by changing fxFlex to fxFlex="1"

[CaerusKaru]

Can anyone provide a minimal reproduction (e.g. StackBlitz)?

[k-paxian]

That piece helped me:

/* Safari fix */
div[fxLayout="column"] > div[fxFlex] {
  flex: 1 0 auto !important;
}

[step4]

Not the right reproduction,
but this does not render the background colors on my iPad:

https://stackblitz.com/edit/angular-ivy-nkxn8x

[k-paxian]

I have a bg color issue as well with this fix, but it's an easy one. Just set appropriate color on the container one level up.

[ronapelbaum2]

try: fxFlex="noshrink"

works for me

[yatashashank]

Thanks @k-paxian, Your solution worked for me in both safari and mobile version.

That piece helped me:

/* Safari fix */
div[fxLayout="column"] > div[fxFlex] {
  flex: 1 0 auto !important;
}