Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

Overlapping breakpoints with ngClass doesn't apply on initial load, only works correctly on window resize #648

Closed
adamdport opened this issue Mar 8, 2018 · 4 comments · Fixed by #955
Closed

Overlapping breakpoints with ngClass doesn't apply on initial load, only works correctly on window resize #648

adamdport opened this issue Mar 8, 2018 · 4 comments · Fixed by #955
Assignees
@ThomasBurleson
Labels
bug has pr A PR has been created to address this issue P2 Issue that is important to resolve as soon as possible
Milestone
7.0.0-beta.23

Comments

@adamdport
Copy link

Bug, feature request, or proposal:

Bug

What is the expected behavior?

if I have overlapping breakpoints on a div, the nearest breakpoint is applied on initial load.

What is the current behavior?

The wrong breakpoint is applied on initial load, but is correct after resizing the window to another breakpoint and returning

What are the steps to reproduce?

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

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

The class that applies on load should be the correct class

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

"@angular/core": "5.2.7"
"@angular/flex-layout": "5.0.0-beta.13"
"@angular/material": "5.2.3"
Chrome 64

Is there anything else we should know?
@Supamiu Supamiu mentioned this issue Mar 13, 2018
Closed
@CaerusKaru
Copy link
Member

Ok so there's good news and bad news. The good news is that you're definitely not crazy, and this is inconsistent behavior.

The bad news is that this is actually working exactly as its designed to work. Here's the logic: when there are competing breakpoints that are activated, the one with the widest range wins (this is documented on the Wiki, and means that lt-md > lt-sm, therefore blue). So on startup, all of the breakpoints become active at the same time and compete, and lt-md wins. BUT, when the window is resized, lt-sm is first deactivated, and then re-activated, meaning that the reactivation event triggered the green layout to appear.

Is any of this correct? Honestly, I have a hard time knowing. I am very open to discussion on this, because it is a glaring inconsistency with how we treat breakpoints.

@CaerusKaru CaerusKaru added discussion Further discussion with the team is needed before proceeding and removed needs: investigation labels Dec 15, 2018
@CaerusKaru CaerusKaru self-assigned this Dec 15, 2018
@CaerusKaru CaerusKaru added the P2 Issue that is important to resolve as soon as possible label Dec 15, 2018
@CaerusKaru CaerusKaru added this to the Backlog milestone Dec 15, 2018
@CaerusKaru
Copy link
Member

Discussed with @ThomasBurleson and we're going to update the ordering algorithm to fix this issue. Hopefully it will get in by the next release.

@CaerusKaru CaerusKaru modified the milestones: Backlog, 7.0.0-beta.22 Dec 15, 2018
@CaerusKaru
Copy link
Member

We're going to target this for the next beta round, which should land in a couple weeks.

@CaerusKaru CaerusKaru removed their assignment Dec 19, 2018
@CaerusKaru CaerusKaru mentioned this issue Dec 21, 2018
Closed
@CaerusKaru CaerusKaru added has pr A PR has been created to address this issue and removed discussion Further discussion with the team is needed before proceeding labels Dec 21, 2018
ThomasBurleson added a commit that referenced this issue Dec 22, 2018
@ThomasBurleson
fix(core): improve use of breakpoint priorities
350e753 
Use breakpoint priority as the only sorting/scanning mechanism;
used to ensure correct MediaChange event notifications.

* prioritize breakpoints: non-overlaps hightest, lt- lowest
  * consistently sort breakpoints ascending by priority
  * highest priority === smallest range
  * remove hackery with reverse(), etc.
* memoize BreakPointRegistry findBy lookups
* fix MatchMedia::observe() to support lazy breakpoint registration
* fix fragile logic in MediaMarshaller
* fix breakpoint registration usage
* clarify update/clear builder function callbacks
* fix MediaObserver breakpoint registration usage

Fixes #648, Fixes #426
@ThomasBurleson ThomasBurleson mentioned this issue Dec 22, 2018
Merged
ThomasBurleson added a commit that referenced this issue Dec 22, 2018
@ThomasBurleson
fix(core): improve use of breakpoint priorities
c593d84 
Use breakpoint priority as the only sorting/scanning mechanism;
used to ensure correct MediaChange event notifications.

* prioritize breakpoints: non-overlaps hightest, lt- lowest
  * consistently sort breakpoints ascending by priority
  * highest priority === smallest range
  * remove hackery with reverse(), etc.
* memoize BreakPointRegistry findBy lookups
* fix MatchMedia::observe() to support lazy breakpoint registration
* fix fragile logic in MediaMarshaller
* fix breakpoint registration usage
* clarify update/clear builder function callbacks
* fix MediaObserver breakpoint registration usage

Fixes #648, Fixes #426
ThomasBurleson added a commit that referenced this issue Dec 23, 2018
@ThomasBurleson
fix(core): improve use of breakpoint priorities
148351b 
Use breakpoint priority as the only sorting/scanning mechanism;
used to ensure correct MediaChange event notifications.

* prioritize breakpoints: non-overlaps hightest, lt- lowest
  * consistently sort breakpoints ascending by priority
  * highest priority === smallest range
  * remove hackery with reverse(), etc.
* memoize BreakPointRegistry findBy lookups
* fix MatchMedia::observe() to support lazy breakpoint registration
* fix fragile logic in MediaMarshaller
* fix breakpoint registration usage
* clarify update/clear builder function callbacks
* fix MediaObserver breakpoint registration usage

Fixes #648, Fixes #426
ThomasBurleson added a commit that referenced this issue Dec 27, 2018
@ThomasBurleson
fix(core): improve use of breakpoint priorities
c767019 
Use breakpoint priority as the only sorting/scanning mechanism;
used to ensure correct MediaChange event notifications.

* prioritize breakpoints: non-overlaps hightest, lt- lowest
  * consistently sort breakpoints ascending by priority
  * highest priority === smallest range
  * remove hackery with reverse(), etc.
* memoize BreakPointRegistry findBy lookups
* fix MatchMedia::observe() to support lazy breakpoint registration
* fix fragile logic in MediaMarshaller
* fix breakpoint registration usage
* clarify update/clear builder function callbacks
* fix MediaObserver breakpoint registration usage

Fixes #648, Fixes #426
ThomasBurleson added a commit that referenced this issue Dec 28, 2018
@ThomasBurleson
fix(core): improve use of breakpoint priorities
6367fa9 
Use breakpoint priority as the only sorting/scanning mechanism;
used to ensure correct MediaChange event notifications.

* prioritize breakpoints: non-overlaps hightest, lt- lowest
  * consistently sort breakpoints ascending by priority
  * highest priority === smallest range
  * remove hackery with reverse(), etc.
* memoize BreakPointRegistry findBy lookups
* fix MatchMedia::observe() to support lazy breakpoint registration
* fix fragile logic in MediaMarshaller
* fix breakpoint registration usage
* clarify update/clear builder function callbacks
* fix MediaObserver breakpoint registration usage

Fixes #648, Fixes #426
ThomasBurleson added a commit that referenced this issue Dec 28, 2018
@ThomasBurleson
fix(core): improve use of breakpoint priorities
bf4d99d 
Use breakpoint priority as the only sorting/scanning mechanism;
used to ensure correct MediaChange event notifications.

* prioritize breakpoints: non-overlaps hightest, lt- lowest
  * consistently sort breakpoints ascending by priority
  * highest priority === smallest range
  * remove hackery with reverse(), etc.
* memoize BreakPointRegistry findBy lookups
* fix MatchMedia::observe() to support lazy breakpoint registration
* fix fragile logic in MediaMarshaller
* fix breakpoint registration usage
* clarify update/clear builder function callbacks
* fix MediaObserver breakpoint registration usage

Fixes #648, Fixes #426
ThomasBurleson added a commit that referenced this issue Dec 30, 2018
@ThomasBurleson
fix(core): improve use of breakpoint priorities
a2617da 
Use breakpoint priority as the only sorting/scanning mechanism;
used to ensure correct MediaChange event notifications.

* prioritize breakpoints: non-overlaps hightest, lt- lowest
  * consistently sort breakpoints ascending by priority
  * highest priority === smallest range
  * remove hackery with reverse(), etc.
* memoize BreakPointRegistry findBy lookups
* fix MatchMedia::observe() to support lazy breakpoint registration
* fix fragile logic in MediaMarshaller
* fix breakpoint registration usage
* clarify update/clear builder function callbacks
* fix MediaObserver breakpoint registration usage

Fixes #648, Fixes #426
ThomasBurleson added a commit that referenced this issue Dec 30, 2018
@ThomasBurleson
fix(core): improve use of breakpoint priorities
765afe2 
Use breakpoint priority as the only sorting/scanning mechanism;
used to ensure correct MediaChange event notifications.

* prioritize breakpoints: non-overlaps hightest, lt- lowest
  * consistently sort breakpoints ascending by priority
  * highest priority === smallest range
  * remove hackery with reverse(), etc.
* memoize BreakPointRegistry findBy lookups
* fix MatchMedia::observe() to support lazy breakpoint registration
* fix fragile logic in MediaMarshaller
* fix breakpoint registration usage
* clarify update/clear builder function callbacks
* fix MediaObserver breakpoint registration usage

Fixes #648, Fixes #426
ThomasBurleson added a commit that referenced this issue Dec 30, 2018
@ThomasBurleson
fix(core): improve use of breakpoint priorities (#955)
d57b293 
Use breakpoint priority as the only sorting/scanning mechanism;
used to ensure correct MediaChange event notifications.

* prioritize breakpoints: non-overlaps hightest, lt- lowest
  * consistently sort breakpoints ascending by priority
  * highest priority === smallest range
  * remove hackery with reverse(), etc.
* memoize BreakPointRegistry findBy lookups
* fix MatchMedia::observe() to support lazy breakpoint registration
* fix fragile logic in MediaMarshaller
* fix breakpoint registration usage
* clarify update/clear builder function callbacks
* fix MediaObserver breakpoint registration usage
* cleanup tests: excessive use of `async()`.

Fixes #648, Fixes #426.
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 5, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@ThomasBurleson ThomasBurleson

Labels
bug has pr A PR has been created to address this issue P2 Issue that is important to resolve as soon as possible
Projects
None yet
Milestone
7.0.0-beta.23
Development

Successfully merging a pull request may close this issue.

fix(core): improve use of breakpoint priorities angular/flex-layout
3 participants
@ThomasBurleson @CaerusKaru @adamdport