angular/components

CDK Overlay - Position Strategy with zoom css on parent

Open

#10.924 geöffnet am 19. Apr. 2018

Auf GitHub ansehen
 (20 Kommentare) (15 Reaktionen) (0 zugewiesene Personen)TypeScript (6.650 Forks)batch import
P4area: cdk/overlayhelp wanted

Repository-Metriken

Stars
 (24.044 Stars)
PR-Merge-Metriken
 (Durchschn. Merge 3T 12h) (98 gemergte PRs in 30 T)

Beschreibung

Bug, feature request, or proposal:

If you are using the zoom CSS property to scale down UI elements the positioning of the CDK Overlay are calculated incorrectly.

What is the expected behavior?

Overlay positions properly as the non-zoomed styled div

What is the current behavior?

Overlay positions are calculated incorrectly when the zoom: 0.9 css property is on the parent container.

What are the steps to reproduce?

https://stackblitz.com/edit/cdk-overlay-zoom

What is the use-case or motivation for changing an existing behavior?

We have a Chrome only application that we use the zoom css property to scale down the UI. Using other methods of scaling does not work, so this is what we have to do.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular - 5.2.10 CDK - 5.2.5

Contributor Guide

Research-Richtung
Untersuchen Sie, wie die CDK Overlay Positionierungsstrategie Offsets berechnet, wenn die CSS Eigenschaft zoom auf übergeordnete Container angewendet wird. Prüfen Sie, ob zoom die Offset Berechnungen beeinflusst, und schlagen Sie eine Korrektur vor, die getBoundingClientRect verwendet oder den Zoomfaktor anpasst.
Tech Stack
typescriptcss
Domain
frontend
Issue Type
Fehler
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 Stunden
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Aktiv
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
CSSAngular CDK basics
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
50