CDK BreapointObserver emits multiple 'true' for differents sizes of screen
- 主要语言
- TypeScript
- 星标
- 25k
- 派生
- 6.8k
- 平均合并
- 1 天 8 小时
- 30 天内合并 PR
- 91
描述
#### 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
贡献指南
调研方向
从 reproduction 中展示的 BreakpointObserver 用法开始,并在 Angular 8 中使用报告的 viewport 尺寸运行它。比较方向和屏幕尺寸查询的初始发射结果与调整大小时的发射结果。完成标准是每个 viewport 都能持续报告正确的匹配条件,且不会出现暂时性的重复结果或无匹配结果。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- angular, typescript
- 领域
- frontend
- Issue 类型
- 缺陷
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 32/100