weixin_39581716
2021-01-12 18:11 阅读 7

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

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

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

该提问来源于开源项目:angular/flex-layout

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

12条回答 默认 最新

  • weixin_39805364 weixin_39805364 2021-01-12 18:11

    1e-09px is shorthand for 0.000000001px and I believe it's a hack for IE: https://github.com/angular/flex-layout/blob/bc0c90070a49dfccaa63300bba6c8fdf1a1d3879/src/lib/flexbox/api/flex.spec.ts#L68

    点赞 评论 复制链接分享
  • weixin_39581716 weixin_39581716 2021-01-12 18:11

    Many Thanks . 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%

    点赞 评论 复制链接分享
  • weixin_39581716 weixin_39581716 2021-01-12 18:11

    image

    点赞 评论 复制链接分享
  • weixin_39667041 weixin_39667041 2021-01-12 18:11
    • Can you provide insight/examples where this generic workaround creates a problem for non-IE browsers?
    点赞 评论 复制链接分享
  • weixin_39581716 weixin_39581716 2021-01-12 18:11

    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?

    点赞 评论 复制链接分享
  • weixin_39827304 weixin_39827304 2021-01-12 18:11

    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.

    image

    点赞 评论 复制链接分享
  • weixin_39581716 weixin_39581716 2021-01-12 18:11

    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.

    点赞 评论 复制链接分享
  • weixin_39972996 weixin_39972996 2021-01-12 18:11

    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.

    点赞 评论 复制链接分享
  • weixin_39610956 weixin_39610956 2021-01-12 18:11

    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: image

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

    点赞 评论 复制链接分享
  • weixin_39610956 weixin_39610956 2021-01-12 18:11

    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.

    点赞 评论 复制链接分享
  • weixin_39964573 weixin_39964573 2021-01-12 18:11

    This was done to revert a change that was too drastic for the community which had relied on 1e-09px for a while. If you want the new behavior, you can use FlexLayoutModule.withConfig({useColumnBasisZero: true}) as documented here

    点赞 评论 复制链接分享
  • weixin_39630095 weixin_39630095 2021-01-12 18:11

    Thank you

    点赞 评论 复制链接分享

相关推荐