Получение ширины / высоты в щелевом освещенном элементе в Edge - PullRequest
Новая
       26

Получение ширины / высоты в щелевом освещенном элементе в Edge

0 голосов
/ 04 февраля 2019

У меня есть один освещенный элемент, inner-element, вставленный в другой освещенный элемент, outer-element.Для большей гибкости outer-element получает возможность установить ширину и высоту inner-element с помощью CSS.inner-element нужно знать его ширину и высоту, чтобы определить, как рисовать SVG-контент.

Как inner-element может надежно узнать свою ширину и высоту в браузерах?

У меня естьВот живой пример: https://stackblitz.com/edit/7pkfkx-j9rnx9

Я использую updated(), чтобы получить ширину / высоту на основе этой очень полезной информации: https://github.com/Polymer/lit-element/issues/507#issuecomment-459546838

В Chrome пример работаетотлично - SVG отображает "ширина = 150 высота = 100".Но в Edge я получаю "width = 300 height = 303.8".Обратите внимание, что даже в Edge inner-element в конечном итоге имеет правильную ширину и высоту (150x100), он, кажется, добирается туда после вызова updated().

Ответы [ 2 ]

0 голосов
/ 21 августа 2019

У меня нет доступа к Edge для подтверждения, но есть несколько вещей, которые могут вас заинтересовать в тестировании здесь.

1) В вашем index.ts есть следующий код: 

    import './inner-element.js';
    import './outer-element.js';

Это означает, что внутренний элемент будет регистрироваться и обновляться до того, как внешний элемент будет зарегистрирован и обновлен, что означает, что его размер будет определен изначально, как если бы outer-element былоdiv, а затем впоследствии предоставляется стилевое оформление внутри outer-element.Поменяйте местами импорт, чтобы предотвратить возникновение этого конкретного порядка гонки.

2) Вы измеряете в firstUpdated(), что может технически произойти до того, как элемент попадет на страницу, то есть вы измеряетеunrendered element, который является элементом без размера.Ожидание, пока connectedCallback() может гарантировать, что вы измеряете элемент "на странице".

3) Измерение элемента синхронно означает, что вы могли бы измерять до того, как все родительские / классифицированные основаныВыполнен код / ​​etc, использование requestAnimationFrame() в connectedCallback() может помочь гарантировать, что вы не проводите измерения, пока вы не будете на 100% уверены, что элемент готов к измерению.

Попробуйте эту демонстрациюдля подтверждения: https://stackblitz.com/edit/measure?file=inner-element.js

0 голосов
/ 06 февраля 2019

Я обнаружил, что надежный способ получить визуализированную ширину и высоту inner-element - это получить к ним доступ с помощью обратного вызова window.setTimeout(), зарегистрированного в firstUpdated().

Это продемонстрировано here .

Принимая во внимание, что LitElement не всегда имеет доступ к своей отображаемой ширине и высоте при вызове его 'updated() или firstUpdated(), он, кажется, имеет доступ к этим значениямкогда вызывается обратный вызов тайм-аута.

Мне было бы удобнее пометить этот ответ как правильный, если бы я мог сформулировать, почему это так, но опытным путем он работает.

...