Как изменить Angular Положение наложения после применения масштаба / увеличения тела? - PullRequest
Новая
       26

Как изменить Angular Положение наложения после применения масштаба / увеличения тела?

1 голос
/ 27 марта 2020

У меня проблема с наложением CDK в Angular Материал с версией 8.2

Если я использую свойство transform CSS для масштабирования элемента тела, расположение наложения CDK рассчитывается неправильно и все Angular Компоненты / элементы материала (MatTooltip, MatMenu et c.) также отображаются некорректно. Точнее - их свойства right, left, top, bottom вычислены неправильно.

Тестовый пример воспроизводится здесь: https://stackblitz.com/edit/cdk-overlay-zoom

Известная проблема в Angular: https://github.com/angular/components/issues/10924

Код, который я использую для применения масштаба / масштабирования к элементу тела: 

const bodyElement = document.querySelector('body');
bodyElement.style.setProperty('-ms-transform', 'scale(1.5)');
bodyElement.style.setProperty('-moz-transform', 'scale(1.5)');
bodyElement.style.setProperty('-webkit-transform', 'scale(1.5)');
bodyElement.style.setProperty('transform', 'scale(1.5)');
bodyElement.style.setProperty('-ms-transform-origin', 'top left');
bodyElement.style.setProperty('-moz-transform-origin', 'top left');
bodyElement.style.setProperty('-webkit-transform-origin', 'top left');
bodyElement.style.setProperty('transform-origin', 'top left');

Могу ли я что-то сделать, чтобы решить эту проблему?

Я думал о переопределении ConnectedPositionStrategy, GlobalPositionStrategy и FlexibleConnectedPositionStrategy путем вызова прототипа или чего-то еще. Я не знаю точно, как это сделать и где это сделать, чтобы применить его глобально (имеется в виду для каждого компонента - MatSelect, MatMenu и другие). Например, я мог бы проверить фактический масштаб, и если он отличается от базового значения, я бы по-разному рассчитал стиль рамки / области наложения (свойства справа, сверху, слева, снизу).

Возможно ли это? Есть ли другое (лучшее) решение?

...