CDK BreapointObserver emits multiple 'true' for differents sizes of screen
- 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
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