angular / angular/components

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

Abierto
#17,013 1 comentario 1 reacción 0 asignados Ver en GitHub
area: cdk/observers P3 regression
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

#### 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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con el uso de BreakpointObserver mostrado en la reproducción y ejecútalo con los tamaños de viewport reportados en Angular 8. Compara las emisiones iniciales y las producidas al cambiar el tamaño para las consultas de orientación y tamaño de pantalla. Se considera terminado cuando cada viewport informa de forma consistente las condiciones coincidentes correctas, sin resultados duplicados transitorios ni resultados sin coincidencias.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
32/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.