property:flex parsing incorrect value `1e-09px;`

[mcwebdev]

property:flex parsing incorrect value 1e-09px;

Googling 1e-09 seems to be some kind of scientific notation, and can be see as a % , / in some code out there.

1 n 1E-09 1 µ 1E-06 1 m 1E-03 1 1 1 k 1E+03 1 M 1E+06 1 G 1E+09

[intellix]

1e-09px is shorthand for 0.000000001px and I believe it's a hack for IE:

flex-layout/src/lib/flexbox/api/flex.spec.ts

Line 68 in bc0c900

let hasFlex = _.hasStyle(dom, 'flex', '1 1 1e-09px') || // IE

[mcwebdev]

Many Thanks @intellix . If that is the case it certainly should not be rendering like that in chrome. If the element.style property max-width:25% then in chrome it should reflect flex: 1 1 25%

[mcwebdev]

[ThomasBurleson]

@mcwebdev - Can you provide insight/examples where this generic workaround creates a problem for non-IE browsers?

[mcwebdev]

I don't think hacks should be in the package, they should probably be in a polyfill shim and added by people that need deprecated support for outdated IE clients. In the latest IE the flex property is working fine flex: 1 1 45%. I unfortunately don't have any insight into how or why chrome would use the IE scientific notation as the value of the flex property, perhaps the angular browser detection is not correctly executing. Also the code 1e-09px that is referenced above is in a automated test function. Do you know where 1e-09px exists in the actual src?

[UncleJimmy]

I have the same issue when using it with angular material 2. Example: https://github.com/EladBezalel/material2-start

When you resize chrome window to small size, right hand side "md-card" moves to bottom, and "1e-09px" appears.

[mcwebdev]

Something I just recently discovered is that it seems to only instantiate the 1e-09px; for the fxFlex property. fxFlex.xs, fxFlex.sm, ... all work correctly. fxFlex is the default directive. On my monitor it is painted on a screen with a resolution of 1920px.

[najibla]

I usually get the issue when I specify a different flex value other than the non default 100. For examplefxFlex.gt-sm etc.. I usually get around it by adding fxFlex="100" as the fallback.

[mattiLeBlanc]

My chrome version (61.0.3163.100) on mac doesnt like the flex value of 1 1 1e-09px either.
I just apply a bunch of rows with<div fxFlex> in a fxLayout="column" and then they are all stacked on top of each other:

When I change the 1e-09px to 100% it looks fine.
I can of course change it to fxFlex="100" which works fine.

[mattiLeBlanc]

i notice this issue where the column flex layout gets compressed happens especially on Chrome in DevTools Mobile view.
I have been having trouble dealing with sticky footer and desktop/mobile view. Adding a min-height: 100vh to my wrapper fixed a lot, however I still have to overwrite the 1e-09px with 100% to not loose vertical height on my elements.