fxHide doesn't work on page load

Bug Report

What is the expected behavior?

fxHide must hide the content on page load.

What is the current behavior?

It doesn’t work as expected on page load.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-gqvksp

<div fxHide fxShow.gt-sm>

  <div fxLayout="row" fxLayoutAlign="start center" fxFlex="0 1 auto">

      This content doesn't get hidden on small screen size!

  </div>
  
</div>

There is no fxLayout on the parent element, and because of that, fxFlex puts display: flex to the parent item in order to work correctly and that overrides the display: none from fxHide.

If I put fxLayout="row" to the parent element, fxHide works as expected. It also works correctly when resizing the window.

What is the use-case or motivation for changing an existing behavior?

It’s a bug.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

flex-layout 6.0.0-beta.17 & beta.18, Angular 6.x, Chrome (MacOS), Firefox (MacOS) & Safari (MacOS)

Is there anything else we should know?

Related issues: #812 , #814

[HighSoftWare96]

I have the same issue, are you sure that the problem is fixed?

[CaerusKaru]

This is a very unfortunate issue, not just because of the UX, but because it’s a tricky fix. We have a case of competing directives, each with their own stake on the CSS display property: fxFlex and fxLayout each want display: flex, and fxShow and fxHide each want display: none or to set the display back to what it should be. There will need to be a design on the best way to regulate this, which I’ll start working on. I apologize for the inconvenience in the meantime.