angular / angular/components

bug(cdk/overlay) on iOS: FlexibleConnectedPositionStrategy + BlockScrollStrategy results in wrong overlay position when scrolled down

Đang mở
#18,890 5 bình luận 1 reaction 0 người được giao Xem trên GitHub
android area: cdk/overlay ios needs investigation 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ả

#### Bug, feature request, or proposal:
When FlexibleConnectedPositionStrategy + Bottom placing + BlockScrollStrategy are used together, the overlay is positioned wrong. At least on an iOS device.

In the example linked below, the link opens an overlay with FlexibleConnectedPositionStrategy connected to an anchor

just right above the link. The overlay is configured to be displayed on the bottom via "withPositions" (see code). A long fake content is added before the link so that it's possible to scroll down.

In Desktop browsers (Chrome, FF, Safari, Edge), the overlay is positioned fine, even when scrolled down.

In Safari on iOS, the position is ok when NOT scrolled down. But if you scroll down, an open the overlay, it's not positioned directly over the link anymore, but way too high. If you open a 2nd overlay via the link, this one is positioned correctly though.

If you don't use BlockScrollStrategy, the positioning always works as expected.

#### What is the expected behavior?
The overlay should be displayed directly above the "open overlay" link.

#### What is the current behavior?
Overlay position is wrong, it's displayed way too high. The further you scroll down, the higher it is displayed.

#### What are the steps to reproduce?
[https://stackblitz.com/edit/angular-cyzulh](https://stackblitz.com/edit/angular-cyzulh)

1. Open [https://angular-cyzulh.stackblitz.io](https://angular-cyzulh.stackblitz.io) on an iOS device
2. Scroll down until you see "open overlay" link
3. click link -> overlay should be shown directly above the text BUT it is not
4. click link again -> 2nd overlay is created which is positioned correctly above the text

#### What is the use-case or motivation for changing an existing behavior?
Seems just a bug...

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
- Browser: Safari on iOS 13.3 or iPadOS 13.3
- Angular 9.x without Ivy, Material 9.1.x (see project dependencies)

#### Is there anything else we should know?

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

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

Hướng nghiên cứu

Bắt đầu bằng cách tái hiện StackBlitz được liên kết trên Safari trên iOS 13.3 với FlexibleConnectedPositionStrategy, bottom placement và BlockScrollStrategy. Kiểm tra các entry point của những strategy đó và so sánh overlay thứ nhất với overlay thứ hai sau khi cuộn; hoàn thành khi overlay thứ nhất được đặt ngay phía trên link, như trên desktop và khi không dùng BlockScrollStrategy.

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
25/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.