Flex-layout: Get Error while using "calc" for fxFlex in IE 11

[Apaltaratski]

When I trying to use "calc" in 'fxFlex' I can see only unexpected error (problem reproduce in IE 11).
It seems that "flex-basis" cannot be created with "calc" (requires more investigation).

[ThomasBurleson]

@Apaltaratski - without a plunker this is not a valid issue. Please provide a Plunkr demo.

[Apaltaratski]

Have problems with plunker on IE11 ...
Create static html file to show this case in IE11.
Attached file and screen

flex-test-html-file.zip

[ThomasBurleson]

Thx @Apaltaratski. You have presented a general flexbox CSS problem; without the use of @angular/flex-layout. General discussion and how-to questions should be posted to the community forum areas:

• Google Groups
• Gitter Channel

Closing this issue as 'invalid'. Thank you.

[martinmcwhorter]

I am seeing an issue with the following code:

<some-element 
    fxFlex="0 0 calc(16% - 10px)"
    fxFlex.lg="0 0 calc(25% - 10px)"
    fxFlex.md="0 0 calc(33% - 10px)"
    fxFlex.sm="0 0 calc(50% - 10px)"
    fxFlex.xs="100%"></some-element>

Only in IE11 I get the following error:

"Error: Unspecified error.
    at DefaultDomRenderer2.prototype.setStyle (http://localhost:4200/vendor.bundle.js:111775:9)
    at BaseAnimationRenderer.prototype.setStyle (http://localhost:4200/vendor.bundle.js:113806:5)
    at DebugRenderer2.prototype.setStyle (http://localhost:4200/vendor.bundle.js:71963:5)
    ...

Angular 4.2.4
Flex-Layout 2.0.0-beta.8

If I remove the calc() the errors go away.

[ThomasBurleson]

@martinmcwhorter - please install the nightly build a retest. See NPM Install Nightly Build.

If you problem persists, I will reopen.

[martinmcwhorter]

@ThomasBurleson

I installed the nightly builds and retested. Issue still exists.

Repro steps:

Use fxFlex with the calc function:

    fxFlex="0 0 calc(16% - 10px)"
    fxFlex.lg="0 0 calc(25% - 10px)"
    fxFlex.md="0 0 calc(33% - 10px)"
    fxFlex.sm="0 0 calc(50% - 10px)"

Stack trace:

ERROR Error: Unspecified error.
   "ERROR"
   {
      [functions]: ,
      __proto__: { },
      description: "Unspecified error.",
      message: "Unspecified error.",
      name: "Error",
      ngDebugContext: {
         [functions]: ,
         __proto__: { },
         component: { },
         componentRenderElement: { },
         context: {
            [functions]: ,
            __proto__: { },
            bank: { }
         },
         elDef: { },
         elOrCompView: { },
         elView: { },
         injector: { },
         nodeDef: { },
         nodeIndex: 1,
         providerTokens: [ ],
         references: { },
         renderNode: { },
         view: { }
      },
      number: -2147467259,
      stack: "Error: Unspecified error.
   at DefaultDomRenderer2.prototype.setStyle (http://localhost:4200/vendor.bundle.js:110096:9)
   at BaseAnimationRenderer.prototype.setStyle (http://localhost:4200/vendor.bundle.js:112127:5)
   at DebugRenderer2.prototype.setStyle (http://localhost:4200/vendor.bundle.js:71951:5)
   at Anonymous function (http://localhost:4200/vendor.bundle.js:73181:9)
   at applyMultiValueStyleToElement (http://localhost:4200/vendor.bundle.js:73177:1)
   at applyStyleToElement (http://localhost:4200/vendor.bundle.js:73168:1)
   at BaseFxDirective.prototype._applyStyleToElement (http://localhost:4200/vendor.bundle.js:73431:5)
   at FlexDirective.prototype._updateStyle (http://localhost:4200/vendor.bundle.js:74701:5)
   at FlexDirective.prototype.ngOnChanges (http://localhost:4200/vendor.bundle.js:74673:9)
   at checkAndUpdateDirectiveInline (http://localhost:4200/vendor.bundle.js:69087:5)"
   }

ERROR CONTEXT [object Object]
   "ERROR CONTEXT"
   {
      [functions]: ,
      __proto__: { },
      component: { },
      componentRenderElement: { },
      context: { },
      elDef: { },
      elOrCompView: { },
      elView: { },
      injector: { },
      nodeDef: { },
      nodeIndex: 1,
      providerTokens: [ ],
      references: { },
      renderNode: { },
      view: { }
   }

ERROR Error: Unspecified error.
   "ERROR"
   {
      [functions]: ,
      __proto__: { },
      description: "Unspecified error.",
      message: "Unspecified error.",
      name: "Error",
      ngDebugContext: { },
      number: -2147467259,
      stack: "Error: Unspecified error.
   at DefaultDomRenderer2.prototype.setStyle (http://localhost:4200/vendor.bundle.js:110096:9)
   at BaseAnimationRenderer.prototype.setStyle (http://localhost:4200/vendor.bundle.js:112127:5)
   at DebugRenderer2.prototype.setStyle (http://localhost:4200/vendor.bundle.js:71951:5)
   at Anonymous function (http://localhost:4200/vendor.bundle.js:73181:9)
   at applyMultiValueStyleToElement (http://localhost:4200/vendor.bundle.js:73177:1)
   at applyStyleToElement (http://localhost:4200/vendor.bundle.js:73168:1)
   at BaseFxDirective.prototype._applyStyleToElement (http://localhost:4200/vendor.bundle.js:73431:5)
   at FlexDirective.prototype._updateStyle (http://localhost:4200/vendor.bundle.js:74701:5)
   at FlexDirective.prototype.ngOnChanges (http://localhost:4200/vendor.bundle.js:74673:9)
   at checkAndUpdateDirectiveInline (http://localhost:4200/vendor.bundle.js:69087:5)"
   }

ERROR CONTEXT [object Object]
   "ERROR CONTEXT"
   {
      [functions]: ,
      __proto__: { },
      component: { },
      componentRenderElement: { },
      context: { },
      elDef: { },
      elOrCompView: { },
      elView: { },
      injector: { },
      nodeDef: { },
      nodeIndex: 1,
      providerTokens: [ ],
      references: { },
      renderNode: { },
      view: { }
   }

ERROR Error: Unspecified error.
   "ERROR"
   {
      [functions]: ,
      __proto__: { },
      description: "Unspecified error.",
      message: "Unspecified error.",
      name: "Error",
      ngDebugContext: { },
      number: -2147467259,
      stack: "Error: Unspecified error.
   at DefaultDomRenderer2.prototype.setStyle (http://localhost:4200/vendor.bundle.js:110096:9)
   at BaseAnimationRenderer.prototype.setStyle (http://localhost:4200/vendor.bundle.js:112127:5)
   at DebugRenderer2.prototype.setStyle (http://localhost:4200/vendor.bundle.js:71951:5)
   at Anonymous function (http://localhost:4200/vendor.bundle.js:73181:9)
   at applyMultiValueStyleToElement (http://localhost:4200/vendor.bundle.js:73177:1)
   at applyStyleToElement (http://localhost:4200/vendor.bundle.js:73168:1)
   at BaseFxDirective.prototype._applyStyleToElement (http://localhost:4200/vendor.bundle.js:73431:5)
   at FlexDirective.prototype._updateStyle (http://localhost:4200/vendor.bundle.js:74701:5)
   at FlexDirective.prototype.ngOnChanges (http://localhost:4200/vendor.bundle.js:74673:9)
   at checkAndUpdateDirectiveInline (http://localhost:4200/vendor.bundle.js:69087:5)"
   }

ERROR CONTEXT [object Object]
   "ERROR CONTEXT"
   {
      [functions]: ,
      __proto__: { },
      component: { },
      componentRenderElement: { },
      context: { },
      elDef: { },
      elOrCompView: { },
      elView: { },
      injector: { },
      nodeDef: { },
      nodeIndex: 1,
      providerTokens: [ ],
      references: { },
      renderNode: { },
      view: { }
   }

ERROR Error: Unspecified error.
   "ERROR"
   {
      [functions]: ,
      __proto__: { },
      description: "Unspecified error.",
      message: "Unspecified error.",
      name: "Error",
      ngDebugContext: { },
      number: -2147467259,
      stack: "Error: Unspecified error.
   at DefaultDomRenderer2.prototype.setStyle (http://localhost:4200/vendor.bundle.js:110096:9)
   at BaseAnimationRenderer.prototype.setStyle (http://localhost:4200/vendor.bundle.js:112127:5)
   at DebugRenderer2.prototype.setStyle (http://localhost:4200/vendor.bundle.js:71951:5)
   at Anonymous function (http://localhost:4200/vendor.bundle.js:73181:9)
   at applyMultiValueStyleToElement (http://localhost:4200/vendor.bundle.js:73177:1)
   at applyStyleToElement (http://localhost:4200/vendor.bundle.js:73168:1)
   at BaseFxDirective.prototype._applyStyleToElement (http://localhost:4200/vendor.bundle.js:73431:5)
   at FlexDirective.prototype._updateStyle (http://localhost:4200/vendor.bundle.js:74701:5)
   at FlexDirective.prototype.ngOnChanges (http://localhost:4200/vendor.bundle.js:74673:9)
   at checkAndUpdateDirectiveInline (http://localhost:4200/vendor.bundle.js:69087:5)"
   }

ERROR CONTEXT [object Object]
   "ERROR CONTEXT"
   {
      [functions]: ,
      __proto__: { },
      component: { },
      componentRenderElement: { },
      context: { },
      elDef: { },
      elOrCompView: { },
      elView: { },
      injector: { },
      nodeDef: { },
      nodeIndex: 1,
      providerTokens: [ ],
      references: { },
      renderNode: { },
      view: { }
   }

ERROR Error: Unspecified error.
   "ERROR"
   {
      [functions]: ,
      __proto__: { },
      description: "Unspecified error.",
      message: "Unspecified error.",
      name: "Error",
      ngDebugContext: { },
      number: -2147467259,
      stack: "Error: Unspecified error.
   at DefaultDomRenderer2.prototype.setStyle (http://localhost:4200/vendor.bundle.js:110096:9)
   at BaseAnimationRenderer.prototype.setStyle (http://localhost:4200/vendor.bundle.js:112127:5)
   at DebugRenderer2.prototype.setStyle (http://localhost:4200/vendor.bundle.js:71951:5)
   at Anonymous function (http://localhost:4200/vendor.bundle.js:73181:9)
   at applyMultiValueStyleToElement (http://localhost:4200/vendor.bundle.js:73177:1)
   at applyStyleToElement (http://localhost:4200/vendor.bundle.js:73168:1)
   at BaseFxDirective.prototype._applyStyleToElement (http://localhost:4200/vendor.bundle.js:73431:5)
   at FlexDirective.prototype._updateStyle (http://localhost:4200/vendor.bundle.js:74701:5)
   at FlexDirective.prototype.ngOnChanges (http://localhost:4200/vendor.bundle.js:74673:9)
   at checkAndUpdateDirectiveInline (http://localhost:4200/vendor.bundle.js:69087:5)"
   }

ERROR CONTEXT [object Object]
   "ERROR CONTEXT"
   {
      [functions]: ,
      __proto__: { },
      component: { },
      componentRenderElement: { },
      context: { },
      elDef: { },
      elOrCompView: { },
      elView: { },
      injector: { },
      nodeDef: { },
      nodeIndex: 1,
      providerTokens: [ ],
      references: { },
      renderNode: { },
      view: { }
   }

[ctaepper]

This is definatly an error, which prevents IE11 from rendering the site properly. How does this get flagged only "minor" ???

[merlosy]

My app is broken on IE because of that...
Seems like an issue with IE 11, they forgot to implement some css rules... again... ><'
https://stackoverflow.com/questions/23037272/css-calc-bug-in-ie11

[vitozev]

@ThomasBurleson, the issue is related with usage of shorthand syntax for flex property in IE11.

If all flex-box properties are explicitly provided, it _should_ works completely fine.

For example, this one will fail:

<div fxFlex="0 0 calc(100%-14px)">

But, if there's a way to specify all properties explicitly, e.g:

<div fxShrink="0" fxGrow="0" fxBasis="calc(100%-14px)">

...it should works!

I think that there should be a check, when flex property is applied to the DOM element, if browser is IE11, shorthand syntax shouldn't be used.

Is this included in any coming build? If not, I'd create a commit for that.

[Apaltaratski]

@kvitozev as I sad 14 of July, it is work as you sad.

Also this problem can be resolved like
Change from

flex: 1 0 calc(100% - 14px);

To

flex: 1 0 auto;
width: calc(100% - 14px);

Note: width/height, required to identify by flex-direction

[vitozev]

Thx! I totally missed that statement.

I'll give it a try.

[BondiGeek]

Definitely a problem with how ng-Flexlayout is dealing with fxFlex="calc(100% -65px)" attributes in IE11.

The above works fine in Chrome, FF and Edge

In IE11 my Angular app will not even load if it comes across that syntax.

Remove the fxFlex (whenever calc is being used) and replace with a class that implements the same calc statement and it fixes IE11.

For now I have done just that and removed all calc statements inside fxFlex attributes.

Reproducible in "@angular/flex-layout": "^2.0.0-beta.9",

[Apaltaratski]

@BondiGeek yes, and this will means that you have two realization of layout one in html and one in scss/css.
As a result one question, why I need this "flex-layout" lib, if I can have some layout realization in scss file too. Also it will be difficult to remove this code (scss/css) and it will complicate bug fixing in my application.

[karan-kang]

Here is the plunker for this issue:
https://plnkr.co/edit/bHj05fY5uLZhP5vqM1hK?p=preview

To reproduce, open the plunker in both chrome and IE.

In IE, you will get this error:

[ThomasBurleson]

On Chrome, this is working without any errors using the latest code on HEAD. See the StackBlitz demo.

Using this Demo, are you seeing any errors in IE? Is so, which version of IE?

[ThomasBurleson]

Please note that now the shorthand notation `fxFlex="calc(20% - 20px)" uses CSS injection with out the shorthand version and instead is using individual properties:

   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: "calc(20% - 20px)";

Does this demo still manifest errors in IE?

If so, you could use this:

flex: 1 1 auto;
width: "calc(20% - 20px)";

Granted this is a CSS workaround, which also works in Chrome:

I realize, this is a manual workaround that we should automate in the library. So let's see if we can have an IE-specific workaround in Beta.11

[ThomasBurleson]

@Apaltaratski - does the issue in IE still manifest using the above StackBlitz demo ?

I do not have IE locally available for testing.

[Apaltaratski]

@ThomasBurleson currently not able to test IE with new version. Sorry for that

[ctaepper]

@ThomasBurleson
the stackblitz doesn't work, because the IE11 polyfills are not included... i forked the app and uncommented the polyfills. however, i still get the following error:

Unhandled promise rejection Error: Object doesn't support property or method 'includes'
  Instantiating https://fxlayout-using-calc-jebt11.stackblitz.io/tmp/appfiles/app/test.component.css
  Loading https://fxlayout-using-calc-jebt11.stackblitz.io/tmp/appfiles/app/test.component.ts
  Loading https://fxlayout-using-calc-jebt11.stackblitz.io/tmp/appfiles/app/app.module.ts
  Loading https://fxlayout-using-calc-jebt11.stackblitz.io/tmp/appfiles/main.ts
  Loading blitzapp
   "Unhandled promise rejection"
   {
      [functions]: ,
      __proto__: { },
      description: "Object doesn't support property or method 'includes'
  Instantiating https://fxlayout-using-calc-jebt11.stackblitz.io/tmp/appfiles/app/test.component.css
  Loading https://fxlayout-using-calc-jebt11.stackblitz.io/tmp/appfiles/app/test.component.ts
  Loading https://fxlayout-using-calc-jebt11.stackblitz.io/tmp/appfiles/app/app.module.ts
  Loading https://fxlayout-using-calc-jebt11.stackblitz.io/tmp/appfiles/main.ts
  Loading blitzapp",
      message: "Object doesn't support property or method 'includes'
  Instantiating https://fxlayout-using-calc-jebt11.stackblitz.io/tmp/appfiles/app/test.component.css
  Loading https://fxlayout-using-calc-jebt11.stackblitz.io/tmp/appfiles/app/test.component.ts
  Loading https://fxlayout-using-calc-jebt11.stackblitz.io/tmp/appfiles/app/app.module.ts
  Loading https://fxlayout-using-calc-jebt11.stackblitz.io/tmp/appfiles/main.ts
  Loading blitzapp",
      name: "Error",
      originalErr: { },
      stack: "TypeError: Object doesn't support property or method 'includes'
   at t (https://static.stackblitz.com/assets/engineblock-f9292fe449d1c267cfe07daba26eef8e7fe1dea0fafe8e87ef4a9d3c208119f8.js:2:17121)
   at a.translate (https://static.stackblitz.com/assets/engineblock-f9292fe449d1c267cfe07daba26eef8e7fe1dea0fafe8e87ef4a9d3c208119f8.js:2:18508)
   at Anonymous function (https://static.stackblitz.com/assets/engineblock-f9292fe449d1c267cfe07daba26eef8e7fe1dea0fafe8e87ef4a9d3c208119f8.js:1:31530)
   at Anonymous function (https://static.stackblitz.com/assets/packs/common-dd572ff19aaab7783e4a.js:1:32045)
   at Anonymous function (https://static.stackblitz.com/assets/packs/common-dd572ff19aaab7783e4a.js:1:31917)
   at a (https://static.stackblitz.com/assets/packs/common-dd572ff19aaab7783e4a.js:1:21188)"
   }

[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._}