angular / angular/components

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

オープン
#17,013 コメント 1 件 リアクション 1 件 担当者 0 名 GitHub で見る
area: cdk/observers P3 regression
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

再現手順に示されている BreakpointObserver の使用から始め、Angular 8 で報告されたビューポートサイズに対して実行します。向きと画面サイズのクエリについて、初期エミッションとリサイズ時のエミッションを比較します。各ビューポートが一時的な重複結果や一致なしの結果を出さず、正しい一致条件を一貫して報告すれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
32/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。