fxFlex on Safari
See original GitHub issueBug 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"
Issue Analytics
- State:
- Created 4 years ago
- Reactions:5
- Comments:7 (1 by maintainers)
Top Results From Across the Web
css - Flex layout display problem with Safari IOS using fx ...
The problem with safari occur on this element (second container in the mat-card-content): <div fxLayout="column" fxFlex ...
Read more >Basic Flex still NOT fixed in Safari - Plunker
assets/images/button1.png" alt="button1"> <p>button1</p> </div> <div fxFlex="100px" fxLayout="column" fxLayoutAlign="center center" ...
Read more >Developers - fxFlex on Safari - - Bountysource
Coming soon: A brand new website interface for an even better experience!
Read more >angular/flex-layout - Gitter
This is a safari specific issue. Jason Yeomans. @YeomansIII. It was the fxFlex setting on the internal objects that caused the issue. Marc...
Read more >Flex Layout Display Problem With Safari Ios Using Fxlayout
On Safari 13.1 it is abrupt while on any other browser Chrome. ... a parent flex element when using height: 100% unless it's...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Not only on Safari, but on Safari on iOS and Samsung default browser the same problem exist.
I fixed it by changing
fxFlex
tofxFlex="1"
That piece helped me: