angular / angular/components

CDK BreapointObserver emits multiple 'true' for differents sizes of screen

Aperta
#17,013 1 commento 1 reazione 0 assegnatari Vedi su GitHub
area: cdk/observers P3 regression
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

#### Reproduction
Steps to reproduce:
1. Write this code in a service, then subscribe. See in console.
```
isLandscape$: Observable = this.breakpointObserver.observe(['(orientation: portrait)', '(orientation: landscape)']).pipe(
map((result: BreakpointState) => {
console.log('result', result);
return result.matches;
})
);
screenSizes$: Observable = this.breakpointObserver
.observe([Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge])
.pipe(
map((result: BreakpointState) => {
console.log('result', result);
return result.matches;
})
);
```

#### Expected Behavior

What behavior were you expecting to see?

I'm expecting to get only 1 condition set to true for media queries defined in the CDK.

#### Actual Behavior

What behavior did you actually see?

My browser is 1903px wide. The 1st time i load the page, I see in the console the Large and XLarge conditions set to true:

```
(min-width: 1280px) and (max-width: 1919.99px): true
(min-width: 1920px): true
```
Then, when I resize my window, this time, the CDK emits only `(min-width: 1280px) and (max-width: 1919.99px): true`.

The same type of error occurs screen when I first get to 'xs' screen by resizing the window: 2 conditions set to true (for Small & XSmall screen sizes):

```
(max-width: 599.99px): true
(min-width: 600px) and (max-width: 959.99px): true
```
Then, when I resize again my window, i only get `(max-width: 599.99px): true`.

ALSO:

When i reload the page in 'xs' size, I get the right values set for both isLandscape & Screen size.
But when i resize the page, I get:
```
breakpoints: {
(orientation: landscape): false
(orientation: portrait): false
}
matches: false
```
I also get a no match from times to times for the screen sizes...

So, that's just not possible.
- The CDK should be able to emit that I'm still in portrait mode,
- the CDK should be able to detect my screen size any time.

#### Environment

- Angular: 8.0.0
- CDK/Material: 8.0.0
- Browser(s): Chrome 76
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con l’utilizzo di BreakpointObserver mostrato nella riproduzione ed eseguilo alle dimensioni del viewport riportate in Angular 8. Confronta le emissioni iniziali e quelle successive al ridimensionamento per le query sull’orientamento e sulle dimensioni dello schermo. Il lavoro è completato quando ogni viewport riporta in modo coerente le condizioni di corrispondenza corrette, senza risultati duplicati transitori né risultati senza corrispondenze.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
32/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.