bug: ion-col styling issues on SSR

[agustinhaller]

Bug Report

Ionic version: [ ] 4.x [x] 5.x

Current behavior: When testing SSR with javascript disabled, <ion-col> rendered styles ignore custom --ion-grid-columns value to calculate col width.

Expected behavior: <ion-col> gets rendered in SSR (with javascript disabled) with the same calculated width it has when rendered in the browser. Taking into consideration custom --ion-grid-columns value and <ion-col> size="" attribute for the width calculation.

Steps to reproduce:

1. Enable (SSR with Angular Universal And Ionic)[https://ionicframework.com/blog/ssr-with-angular-universal-and-ionic/]
2. Create a view with <ion-row>, custom --ion-grid-columns: 10; value for that row, and <ion-col size="2"> with a defined size attribute.
3. Run npm run dev:ssr
4. Open Chrome dev tools and disable javascript (in order to properly test SSR)
5. Notice how the <ion-col> width gets calculated with the default 12 columns instead of the custom --ion-grid-columns value.

Other information:

SSR (Pixel 2)

Browser rendered (Pixel 2)

<ion-row class="some-row">
  <ion-col class="some-col" size="2">
    Foo
  </ion-col>
</ion-row>

Overriding Ionic column styles fixes the issue, but it would be nice to have a solution on the framework side instead of relying on workarounds.

ion-row.some-row {
  --ion-grid-columns: 10;

  ion-col.some-col {
    --custom-col-width: 2;
    // SSR fix: Override ion-col styles
    flex: 0 0 calc(calc(var(--col-item-width) / var(--ion-grid-columns, 12)) * 100%);
    width: calc(calc(var(--col-item-width) / var(--ion-grid-columns, 12)) * 100%);
    max-width: calc(calc(var(--col-item-width) / var(--ion-grid-columns, 12)) * 100%);
  }
}

Ionic info:

Ionic:

   Ionic CLI                     : 6.11.8 (/Users/agustin/.npm-global/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.3
   @angular-devkit/build-angular : 0.1001.2
   @angular-devkit/schematics    : 10.1.2
   @angular/cli                  : 10.1.2
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.1
   @capacitor/core : 2.4.1

Utility:

   cordova-res (update available: 0.15.1) : 0.11.0
   native-run                             : not installed

System:

   NodeJS : v12.14.1 (/usr/local/bin/node)
   npm    : 6.14.8
   OS     : macOS Catalina

[mhartington]

I think this is related to angular universal and their dom parser (domino), but I'm not 100% sure. Can you validate this in another component that uses css vars? If the issue is still there, it's domino.

Also, can you please provide a sample project for issues like these? It's hard to debug this further without something to test against.

[agustinhaller]

I think this is related to angular universal and their dom parser (domino), but I'm not 100% sure. Can you validate this in another component that uses css vars? If the issue is still there, it's domino.

Also, can you please provide a sample project for issues like these? It's hard to debug this further without something to test against.

I believe the root of the issue is this line. In SSR the Col component always returns false for the SUPPORTS_VARS function.

I'm wondering if it's possible to set multiple values for the same property using element.styles. Something like this:

return {
  'flex': `0 0 ((columns / 12) * 100) + '%'`,
  'flex': `0 0 calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`,
  'width': ...
  'max-width': ...
};

I'm not completely sure if browsers that don't support CSS vars will ignore the second value and use the first one instead.

[Cafnio]

Regarding ion-col, not sure if it should be like this, but I have the following code in my app:

<ion-col size-xl="2" size-lg="2" size-md="0" size-sm="0" size-xs="0">

SSR Ignores those sizes and only takes into consideration if I add a size="2".

Somehow I believe that the SSR is not reading var values. For example, In my app, I have a bunch of color: var(--text-color) and they are ignored by SSR (Javascript disabled).

[Makarish-naik]

Even i have same issue. I think the issue is with implementation of ion-col size calculation. ion-col relies on JS to get innerwidth and resize event for size calculation. It calculates the size and applies the style attribute. As per my understanding and expectation, it should add classes to ion col and handle the width in media-query. The reason for this analysis is, one Universal engine runs the code, it outputs the basis html and css. It doesn't need JS. Since Ion-col relies on JS, it isn't working.

[liamdebeasi]

Thanks for the report and apologies for the delay. Does anyone have a GitHub repo that I can use to verify this behavior?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!