Breakpoint fallback broken for CSS @media queries with Universal server rendering #1065
Description
Bug Report
I'm trying to migrate to Universal SSR. Flex Layout @media query breakpoints seem to be broken. Is there a workaround for now?
What is the expected behavior?
Universal SSR generates a <style> block that should mimic the browser-side JS runtime behavior, but it's consistently not.
Example A: xs shows 1, 2, 3 in a column, sm shows 1,2 on one line and 3 on the next, and md/lg/xl shows 1, 2, 3 in a row.
<div fxLayout="row wrap" fxLayoutAlign="center start">
<div fxFlex="100%" fxFlex.gt-xs="50%" fxFlex.gt-sm="33.33%"> 1 </div>
<div fxFlex="100%" fxFlex.gt-xs="50%" fxFlex.gt-sm="33.33%"> 2 </div>
<div fxFlex="100%" fxFlex.gt-xs="50%" fxFlex.gt-sm="33.33%"> 3 </div>
</div>
Example B: xs/sm shows 1, 2, 3 in a column, md/lg shows 1,2 on one line and 3 on the next, and xl shows 1, 2, 3 in a row.
<div fxLayout="row wrap" fxLayoutAlign="center start">
<div fxFlex="100%" fxFlex.gt-sm="50%" fxFlex.gt-lg="33.33%"> 1 </div>
<div fxFlex="100%" fxFlex.gt-sm="50%" fxFlex.gt-lg="33.33%"> 2 </div>
<div fxFlex="100%" fxFlex.gt-sm="50%" fxFlex.gt-lg="33.33%"> 3 </div>
</div>
What is the current behavior?
Breakpoints aren't properly calculated, showing the wrong layout on initial page render, which then jarringly corrects itself once JS has loaded.
Example A: xs shows 1, 2, 3 in a column, sm/md/lg/xl shows in a row.
Example B: all screen sizes shows 1, 2, 3 in a row.
It seems the @media queries are not generated correctly. Here's the CSS that Example A generates for one of the divs. The gt-xs generates a media query at the top ((min-width: 600px)) that is then overridden by the sm below it ((min-width: 600px) and (max-width: 959px)):
<style class="flex-layout-ssr">
@media all { .flex-layout-355 { max-width:100%; } }
@media screen and (min-width: 600px) { .flex-layout-355 { max-width:50%; } }
@media screen and (min-width: 960px) { .flex-layout-355 { max-width:33.33%; } }
@media screen and (min-width: 1280px) { .flex-layout-355 { max-width:33.33%; } }
@media screen and (min-width: 1920px) { .flex-layout-355 { max-width:33.33%; } }
@media screen and (min-width: 1920px) and (max-width: 5000px) { .flex-layout-355 { max-width:33.33%; } }
@media screen and (max-width: 1919px) { .flex-layout-355 { max-width:33.33%; } }
@media screen and (min-width: 1280px) and (max-width: 1919px) { .flex-layout-355 { max-width:33.33%; } }
@media screen and (max-width: 1279px) { .flex-layout-355 { max-width:33.33%; } }
@media screen and (min-width: 960px) and (max-width: 1279px) { .flex-layout-355 { max-width:33.33%; } }
@media screen and (max-width: 959px) { .flex-layout-355 { max-width:33.33%; } }
@media screen and (min-width: 600px) and (max-width: 959px) { .flex-layout-355 { max-width:33.33%; } }
@media screen and (max-width: 599px) { .flex-layout-355 { max-width:100%; } }
@media screen and (min-width: 0px) and (max-width: 599px) { .flex-layout-355 { max-width:100%; } }
</style>
What are the steps to reproduce?
Serve app via Angular Universal (FlexLayoutServerModule in app.server.module.ts). Add this to a page:
<div fxLayout="row wrap" fxLayoutAlign="center start">
<div fxFlex="100%" fxFlex.gt-xs="50%" fxFlex.gt-sm="33.33%"> 1 </div>
<div fxFlex="100%" fxFlex.gt-xs="50%" fxFlex.gt-sm="33.33%"> 2 </div>
<div fxFlex="100%" fxFlex.gt-xs="50%" fxFlex.gt-sm="33.33%"> 3 </div>
</div>
Disable JS in browser. Load page.
What is the use-case or motivation for changing an existing behavior?
To render page accurately. Without this, Flex Layout with Angular Universal displays layouts improperly.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
FlexLayout 7.0.0-beta.24.
Angular 7.2.15.
Material 7.3.7.
macOS 10.14.3.
TypeScript 3.2.4.
Firefox 66 and Chrome 74.