fxLayoutGap doesn't work when resizing the browser

[tsteuwer-accesso]

Bug Report

What is the expected behavior?

Flex Layout Gap works correctly when manually resizing the browser and you have one layout inside another layout.

What is the current behavior?

Flex Layout Gap breaks and styles aren't applied to the inner one when resizing the browser manually.

What are the steps to reproduce?

Basically, if a user tries to manually adjust the size of the browser, inner fxLayoutGap doesn't work unless you go SUPER slow.

Please watch this video: https://www.dropbox.com/s/9kiv4wk8c8lk88e/angular-flex-layout-seed-smwtwk%20-%20StackBlitz.webm?dl=0

StackBlitz for example app where this breaks and where I took the video:
Full screen: https://angular-flex-layout-seed-smwtwk.stackblitz.io
Editor: https://stackblitz.com/edit/angular-flex-layout-seed-smwtwk

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

Having layouts inside layouts is a must for building web pages.

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

Angular CLI: 8.0.6
Node: 10.9.0
OS: linux x64
Angular: 8.0.3
... common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version

@angular-devkit/architect 0.800.6
@angular-devkit/build-angular 0.800.6
@angular-devkit/build-optimizer 0.800.6
@angular-devkit/build-webpack 0.800.6
@angular-devkit/core 8.0.6
@angular-devkit/schematics 8.0.6
@angular/animations 8.1.3
@angular/cdk 8.1.1
@angular/cli 8.0.6
@angular/flex-layout 8.0.0-beta.26
@angular/material 8.1.1
@ngtools/webpack 8.0.6
@schematics/angular 8.0.6
@schematics/update 0.800.6
rxjs 6.5.2
typescript 3.4.5
webpack 4.30.0

Is there anything else we should know?

Nope. Just watch the video.

[CaerusKaru]

I don’t see any reference to fxLayoutGap in the template on the linked StackBlitz. Can you make sure the changes you need are correctly saved?

[tsteuwer-accesso]

Hmm... I'm guessing it didn't save? Try this again:

https://stackblitz.com/edit/angular-flex-layout-seed-smwtwk

[CaerusKaru]

I'm unable to reproduce this as you indicated. Can you provide more explicit instructions? (exact browser size used, behavior at each size, etc)

[tsteuwer-accesso]

@CaerusKaru , did you see the video I posted in the original post on exactly what I'm doing? All I do is resize the browser pretty fast and it doesn't remove the gap pixels. If I resize the browser slowly, it works.

[tsteuwer-accesso]

I have dual 1920x1080 and it happens on each screen. This happens in Chrome on both windows and linux. I can also replicate this on Chrome on Android just by changing the orientation of the phone at the demo links above.

[tsteuwer-accesso]

I believe we can remove the needs:demo tag since I provided a demo 👍

[JorisDebonnet]

I am also encountering this issue. My case has the exact same situation as this existing demo here: the Gap and the Direction change at the same time (breakpoint), with a gap present on one Direction, and not on the other. The issue is that the Gap is not removed when switching to the Gap-less Direction.

Does that help to fix the issue, @CaerusKaru?

[CaerusKaru]

Can anyone confirm this is an issue in the latest versions? I've tested this on the latest nightly and I couldn't reproduce.