bug(cdk/overlay) on iOS: FlexibleConnectedPositionStrategy + BlockScrollStrategy results in wrong overlay position when scrolled down
- Vorherrschende Sprache
- TypeScript
- Sterne
- 25k
- Forks
- 6.8k
- Ø Merge
- 1 T. 8 Std.
- Gemergte PRs (30 T.)
- 91
Beschreibung
#### 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
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?
Beitragsleitfaden
Rechercherichtung
Beginne damit, den verlinkten StackBlitz in Safari auf iOS 13.3 mit FlexibleConnectedPositionStrategy, bottom placement und BlockScrollStrategy zu reproduzieren. Untersuche die Einstiegspunkte dieser Strategien und vergleiche das erste und zweite Overlay nach dem Scrollen; abgeschlossen ist es, wenn das erste Overlay direkt über dem Link positioniert ist, wie auf dem Desktop und ohne BlockScrollStrategy.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, typescript
- Bereich
- frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 25/100