angular/components

CDK Overlay - Position Strategy with zoom css on parent

Open

#10 924 ouverte le 19 avr. 2018

Voir sur GitHub
 (20 commentaires) (15 réactions) (0 assignés)TypeScript (6 650 forks)batch import
P4area: cdk/overlayhelp wanted

Métriques du dépôt

Stars
 (24 044 stars)
Métriques de merge PR
 (Merge moyen 3j 12h) (98 PRs mergées en 30 j)

Description

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

Guide contributeur

Direction de recherche
Étudiez comment la stratégie de positionnement de l'overlay CDK calcule les décalages lorsque la propriété CSS zoom est appliquée sur les conteneurs parents. Vérifiez si zoom affecte le calcul des décalages et proposez une correction utilisant getBoundingClientRect ou ajustement du facteur de zoom.
Stack technique
typescriptcss
Domaine
frontend
Type d'issue
Bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
3
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 heures
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
CSSAngular CDK basics
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
50