angular / angular/components

bug(FlexibleConnectedPositionStrategy): Incorrect position on mobile browsers when address bar is hidden

Đang mở
#27,739 0 bình luận 7 reaction 0 người được giao Xem trên GitHub
android area: cdk/overlay ios P2
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

FlexibleConnectedPositionStrategy seems to incorrectly calculate positions for overlays with `overlayY: bottom` on mobile devices, but only when the address bar is hidden. It doesn't matter if the page is scrolled or how the elementRef is positioned. As soon as the address bar is visible there is no issue.

### Reproduction

StackBlitz link: https://building-tooltip-ovwh6v.stackblitz.io/

Steps to reproduce:
1. Open the example at https://building-tooltip-ovwh6v.stackblitz.io/ in a mobile browser (tried on Pixel 7 and iPhone 13).
2. Scroll down until the address bar is removed, but the button still has enough room on top to display a tooltip.
3. Hover over or click the tooltip button located at the bottom of the page.
4. The tooltip that should appear above the button is displayed in the wrong position.
5. Scrolling to the top moves the tooltip to the correct location.

### Expected Behavior

The tooltip should appear in the correct location, even when the address bar is hidden on a mobile browser.

### Actual Behavior

On mobile browsers, when using a position strategy with `overlayY: 'bottom'` for a tooltip, the tooltip's location becomes incorrect when the address bar is hidden. This seems to be affecting the calculation of the tooltip's position, placing it in the wrong location on the page.

**Position Strategy Used:**
```
{
originX: 'center',
originY: 'top',
overlayX: 'center',
overlayY: 'bottom',
offsetY: -8,
}
```

### Environment

- Angular: 16 (example shows it exists in 7 as well)
- Browser(s): Chrome
- Operating System: iOS/Android

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Start with Angular Material's FlexibleConnectedPositionStrategy and reproduce the StackBlitz example on Chrome mobile browsers with the address bar hidden. Compare the calculated tooltip position for overlayY: 'bottom' while scrolling; done means the tooltip remains correctly positioned above the button on the listed mobile environments.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
38/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.