Get Error while using "calc" for fxFlex in IE 11 #323

Apaltaratski · 2017-06-22T11:02:05Z

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 · 2017-06-22T14:26:41Z

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

Apaltaratski · 2017-07-14T14:12:12Z

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 · 2017-07-16T12:22:59Z

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:

Closing this issue as 'invalid'. Thank you.

martinmcwhorter · 2017-08-18T15:41:06Z

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 · 2017-08-18T17:43:16Z

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

If you problem persists, I will reopen.

martinmcwhorter · 2017-08-21T08:40:37Z

@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 · 2017-08-24T09:17:57Z

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

merlosy · 2017-08-31T09:52:37Z

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 · 2017-09-04T08:24:47Z

@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 · 2017-09-04T13:25:34Z

@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 · 2017-09-04T13:32:56Z

Thx! I totally missed that statement.

I'll give it a try.

BondiGeek · 2017-09-06T21:02:53Z

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 · 2017-09-13T06:50:22Z

@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 · 2017-10-16T17:09:17Z

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 · 2017-10-25T22:14:37Z

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 · 2017-10-25T22:21:25Z

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 · 2017-10-30T15:08:43Z

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

I do not have IE locally available for testing.

Apaltaratski · 2017-10-30T15:44:37Z

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

ctaepper · 2017-10-30T16:33:19Z

@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)"
   }

* Fix for when flex-basis is unitless and 0 * Fix for when no width/height is applied and flex-basis should be set * Fix for IE flex-basis with calc values * Fix for SSR properties set to 0 Fixes #277 Fixes #280 Fixes #323 Fixes #528 Fixes #534

* Fix for when flex-basis is unitless and 0 * Fix for when no width/height is applied and flex-basis should be set * Fix for IE flex-basis with calc values * Fix for SSR properties set to 0 Fixes angular#277 Fixes angular#280 Fixes angular#323 Fixes angular#528 Fixes angular#534

* Fix for when flex-basis is unitless and 0 * Fix for when no width/height is applied and flex-basis should be set * Fix for IE flex-basis with calc values * Fix for SSR properties set to 0 Fixes #277 Fixes #280 Fixes #323 Fixes #528 Fixes #534

* fix for when flex-basis is unitless and 0 * fix for when no width/height is applied and flex-basis should be set * fix for IE flex-basis with calc values * fix for SSR properties set to 0 Fixes #277 Fixes #280 Fixes #323 Fixes #528 Fixes #534

angular-automatic-lock-bot · 2019-09-04T22:02:11Z

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

ThomasBurleson added needs: demo P5 Low-priority issue that needs consideration labels Jun 22, 2017

ThomasBurleson added this to the v2.0.0-beta.10 milestone Jul 16, 2017

ThomasBurleson closed this as completed Jul 16, 2017

ThomasBurleson reopened this Aug 21, 2017

ThomasBurleson added P4 Low-priority issue that needs to be resolved and removed needs: demo P5 Low-priority issue that needs consideration labels Aug 21, 2017

ThomasBurleson modified the milestones: v2.0.1-beta.10, v2.0.1-beta.11 Oct 25, 2017

ThomasBurleson added IE Bug This issue is specific to Internet Explorer P3 Important issue that needs to be resolved and removed P4 Low-priority issue that needs to be resolved labels Oct 25, 2017

ThomasBurleson added the in-progress label Oct 30, 2017

CaerusKaru modified the milestones: v5.0.0-beta.14, v5.0.0-beta.15 Feb 1, 2018

CaerusKaru modified the milestones: v6.0.0-beta.15, v6.0.0-beta.14 Feb 25, 2018

CaerusKaru self-assigned this Feb 25, 2018

CaerusKaru added P1 Urgent issue that should be resolved before the next re-lease and removed P3 Important issue that needs to be resolved labels Feb 25, 2018

CaerusKaru added has pr A PR has been created to address this issue and removed in-progress labels Feb 25, 2018

CaerusKaru mentioned this issue Feb 25, 2018

fix(fxFlex): apply correct flex-basis stylings #629

Merged

CaerusKaru closed this as completed in #629 Mar 9, 2018

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 4, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Get Error while using "calc" for fxFlex in IE 11 #323

Get Error while using "calc" for fxFlex in IE 11 #323

Apaltaratski commented Jun 22, 2017

ThomasBurleson commented Jun 22, 2017

Apaltaratski commented Jul 14, 2017

ThomasBurleson commented Jul 16, 2017 •

edited

Loading

martinmcwhorter commented Aug 18, 2017

ThomasBurleson commented Aug 18, 2017

martinmcwhorter commented Aug 21, 2017 •

edited by ThomasBurleson

Loading

ctaepper commented Aug 24, 2017

merlosy commented Aug 31, 2017 •

edited

Loading

vitozev commented Sep 4, 2017 •

edited

Loading

Apaltaratski commented Sep 4, 2017

vitozev commented Sep 4, 2017

BondiGeek commented Sep 6, 2017 •

edited

Loading

Apaltaratski commented Sep 13, 2017

karan-kang commented Oct 16, 2017 •

edited

Loading

ThomasBurleson commented Oct 25, 2017 •

edited

Loading

ThomasBurleson commented Oct 25, 2017 •

edited

Loading

ThomasBurleson commented Oct 30, 2017

Apaltaratski commented Oct 30, 2017

ctaepper commented Oct 30, 2017

angular-automatic-lock-bot bot commented Sep 4, 2019

Get Error while using "calc" for fxFlex in IE 11 #323

Get Error while using "calc" for fxFlex in IE 11 #323

Comments

Apaltaratski commented Jun 22, 2017

ThomasBurleson commented Jun 22, 2017

Apaltaratski commented Jul 14, 2017

ThomasBurleson commented Jul 16, 2017 • edited Loading

martinmcwhorter commented Aug 18, 2017

ThomasBurleson commented Aug 18, 2017

martinmcwhorter commented Aug 21, 2017 • edited by ThomasBurleson Loading

ctaepper commented Aug 24, 2017

merlosy commented Aug 31, 2017 • edited Loading

vitozev commented Sep 4, 2017 • edited Loading

Apaltaratski commented Sep 4, 2017

vitozev commented Sep 4, 2017

BondiGeek commented Sep 6, 2017 • edited Loading

Apaltaratski commented Sep 13, 2017

karan-kang commented Oct 16, 2017 • edited Loading

ThomasBurleson commented Oct 25, 2017 • edited Loading

ThomasBurleson commented Oct 25, 2017 • edited Loading

ThomasBurleson commented Oct 30, 2017

Apaltaratski commented Oct 30, 2017

ctaepper commented Oct 30, 2017

angular-automatic-lock-bot bot commented Sep 4, 2019

ThomasBurleson commented Jul 16, 2017 •

edited

Loading

martinmcwhorter commented Aug 21, 2017 •

edited by ThomasBurleson

Loading

merlosy commented Aug 31, 2017 •

edited

Loading

vitozev commented Sep 4, 2017 •

edited

Loading

BondiGeek commented Sep 6, 2017 •

edited

Loading

karan-kang commented Oct 16, 2017 •

edited

Loading

ThomasBurleson commented Oct 25, 2017 •

edited

Loading

ThomasBurleson commented Oct 25, 2017 •

edited

Loading